iMasters | Por uma internet mais criativa e dinâmica

• CSS

• Imprimir
• Indicar
• Digg it
• Del.icio.us
• Twitter
• 14 comentários

As técnicas CSS para posicionamento do rodapé do site na parte inferior da página são bem conhecidas e documentadas. Se o layout é de uma coluna, basta inserir a marcação para o rodapé logo após a marcação da coluna e o próprio esquema de renderização dos boxes CSS se encarrega de "empurrar" o rodapé para a posição imediatamente após a coluna.

Quando se trata de layouts multicolunares nos quais usamos a propriedade CSS float a tarefa de posicionar o rodapé requer a técnica conhecida como "clear floats" que consiste no uso da propriedade CSS clear para forçar o rodapé para uma posição imediatamente após as colunas.

Para o entendimento deste tutorial é pré-requisito o conhecimento com detalhes das técnicas de posicionamento do rodapé mencionadas acima.

O problema

Quando a página não preenche toda a altura da janela do navegador, pelo fato de que a quantidade de conteúdos não é extensa e consequentemente não havendo barra de rolagem vertical, a aplicação das técnicas de posicionamento do rodapé faz com que apareça um espaço vago entre o limite inferior do rodapé e o limite inferior da janela do navegador.

Este tutorial se propõe a mostrar a técnica CSS para solucionar o problema, forçando o rodapé para a posição no limite inferior da janela quando não há barra de rolagem. Trata-se de um acréscimo nas conhecidas regras de estilo de posicionamento do rodapé com a finalidade de obter o efeito desejado.

Neste link você poderá visualizar o problema e neste link a solução.

A estrutura da marcação

Seja qual for o layout, uma coluna ou multicolunar, para obter o efeito desejado temos que planejar a marcação do documento segundo as seguintes diretrizes:

• Uma div deverá ser o container para toda a página -- div#tudo
• Uma div deverá ser o container para o topo -- div#topo
• Uma div deverá ser o container para a(s) coluna(s) do layout -- div#conteudo
• Uma div deverá ser o container para o rodapé -- div#rodape

Nota:Os nomes das divs mostrados acima, são os que adotamos nos exemplos que ilustram este tutorial.

A estrutura de marcação é mostrada a seguir:

...
<body">
<div id="tudo">
  
  <div id="topo"></div>
  
  <div id="conteudo">
    ...aqui entra(m) a(s) coluna(s) do layout.
  </div> <!-- Fim div#conteudo -->
  
  <div id="rodape"></div>

</div> <!-- Fim div#tudo -->
</body>
</html>

A marcação para o layout inicial do nosso exemplo

Para ilustrar este tutorial usaremos como ponto de partida um layout fixo com topo, rodapé e duas colunas de conteúdos marcadas como div#principal e div#auxiliar sendo esta destinada à navegação e aquela aos conteúdos dos assuntos tratados em cada página.

O layout é construido usando a técnica de flutuar a coluna principal à esquerda e a coluna auxiliar à direita e adotando uma div#clear logo após as colunas flutuadas com a finalidade de "empurrar" o rodapé para baixo (Sim, eu sei que existem técnicas para obter "clear floats" sem uso de marcação adicional e você poderá usá-las se assim preferir).

Conforme já foi dito no início, é pré-requisito para entendimento deste tutorial que você conheça a construção deste layout e assim não vou entrar em detalhes de construção do layout inicial. Para uma revisão e explicação detalhada ver a matéria Layout CSS de 2 colunas com faux column.

A estrutura de marcação com o acréscimo para obter o layout inicial é a seguinte:

...
<body">
<div id="tudo">
  
  <div id="topo"></div>
  

  <div id="conteudo">
	<div id="principal">
      ...conteúdos da coluna principal...
	</div> <
  
	<div id="auxiliar">
      ...conteúdos da coluna auxiliar...
	</div> <
    <div id="clear"></div>
    </div> <!-- Fim div#conteudo -->
  
  <div id="rodape"></div>

</div> <!-- Fim div#tudo -->
</body>
</html>

Notar que em relação à marcação para um layout convencional houve o acréscimo da div#conteudo para container de tudo que está entre o topo e o rodapé e a inserção da div#clear uma vez que o rodapé foi colocado fora da div#conteudo e não poderá ser usado para a função "clear floats".

Veja em uma página com pouco conteúdo a renderização e as respectivas regras CSS do layout inicial e a seguir veja em uma página com muito conteúdo a renderização do mesmo layout (sugestão: inspecione o código fonte das páginas para visualizar a marcação e as regras CSS).

Estendendo as colunas por toda a altura da tela

Vamos considerar a página com pouco conteúdo que você já deve ter visitado conforme referenciada no link na seção anterior. Nosso primeiro passo é estender as duas colunas de conteúdos até a parte inferior da janela do navegador. Para isto acresentamos as seguintes regras CSS à folha de estilo:

html, body {
	height: 100%;
	}

#tudo {
	min-height: 100%;
	...
	}

/* hack para IE6 que trata height como min-height */
* html #tudo {
	height: 100%;
	}

O acréscimo destas regras causa o efeito de estender as colunas de conteúdo sem alterar a posição do rodapé conforme mostrado nesta página 3 de exemplo.

Posicionando o rodapé

Para posicionar o rodapé "empurrando-o" para o limite inferior da janela usaremos posicionamento absoluto acrescentando as seguintes regras CSS:

#tudo {
	position: relative;
	...
	}

#rodape {
	position: absolute;
	bottom: 0;
	}

O acréscimo destas regras causa o efeito de "empurrar o rodapé para o limite inferior da janela conforme mostrado nesta página 4 de exemplo.

Resolvido o problema? Não, ainda não está resolvido, pois embora tudo tenha funcionado a contento para páginas com pouco conteúdo veja o que acontece nesta página 5 de exemplo se inserirmos mais conteúdos forçando o aparecimento de uma barra de rolagem.

Se não observou, volte ao link anterior e role até o fim da página. Observe agora que o rodapé está posicionado no final da página, mas sobre os conteúdos da colunas.

Temos que abrir um espaço vertical no final, para encaixar o rodapé. Conseguimos este espaço declarando um padding para a div#conteudo . Como o rodapé tem 20px de altura, podemos declarar 30px para aquele padding assegurando um espaçamento extra de 10px entre o final do conteúdo e o início do rodapé. O acréscimo na folha de estilo é:

#conteudo {
	padding-bottom: 30px;
	}

E finalmente o rodapé corretamente posicionado conforme proposto no início do tutorial nesta página com pouco conteúdo e nesta página com muito conteúdo.

Créditos:

Esta técnica foi originalmente desenvolvida por SolarDream Studios e aperfeiçoada por The Man in Blue.

Será lançado no próximo mês de julho o livro Criando sites com HTML de autoria do Maurício Samy Silva. Ver detalhes...

Todos os artigos de Mauricio Samy

14 comentários publicados

• 1. Muito bom...

  Quinta-feira, 12/06/2008, por Cristiano Nascimento
  

  Pela primeira vez vi um layoult que funciona de verdade com div's e height 100%, muito bom mesmo.

  Responder comentário

• 2. Hacks

  Sábado, 14/06/2008, por Eduardo Cortesia Fontana
  

  Esse hack pro IE6 valida no W3C?

  Responder comentário

• 3. Valeu Samy !

  Domingo, 15/06/2008, por Gabriel Paiva
  

  Comprei seu livro e o utilizo para tudo ! Já estou virando fera por causa dele !
  
  Eu já tinha visto uma solução parecida, porém não funcionava direito quando o conteudo passava do final da página... aí o footer ficava em cima do conteudo...
  
  Vou testar e ver se funciona.. ai eu comento denovo,,,
  
  Obrigado

  Responder comentário

• 4. Hacks

  Quinta-feira, 19/06/2008, por Eduardo Cortesia Fontana
  

  Alou tem alguem ai?
  
  Samy pode responder minha pergunta? Valeu!
  
  Abraços!

  Responder comentário

• 5. Hacks- comprove vc mesmo

  Quinta-feira, 19/06/2008, por Mauricio Samy
  

  @Olá Eduardo,
  Vá em http://jigsaw.w3.org/css-validator/ e digite o endereço da página com o hack para ver se valida.
  --------------------------------------------------------
  @Olá desenvolvedores dos Padrões Web,
  Sempre que você tiver dúvida sobre validação consulte direto na fonte, os validadores do W3C, que é uma ferramenta sua.

  Responder comentário

• 6. IE6 não precisou do hack

  Sexta-feira, 27/06/2008, por Junio Albino
  

  Estranho, fiz aqui sem o hack e funcionou normalmente no IE6

  Responder comentário

• 7. que-linguagem ??

  Sábado, 26/07/2008, por PEDRO LUCEAC
  

  Olá Mauricio,
  Vi seu artigo de :
  Quinta-feira, 12/06/2008 - 11:00 - Por Mauricio Samy
  Seções relacionadas: CSS
  e me veio de novo, a ? ///que linguagem devo mergulhar para nadar na WEB ? ///
  Creio eu que vc pode me ajudar, pois sou profis autônomo independente e uso, a minha ferramenta predileta, o {{ VFP-9}} ; e isso desde que era chamado de FoxPro, a cerca de duas décadas. A mim seria muito importante o seu parecer.
  Pedro Luceac pedroluceac@terra.com.br
  Forte ABRAÇO !!

  Responder comentário

• 8. Linguagem para web

  Sábado, 26/07/2008, por Mauricio Samy
  

  @Pedro,
  Comece estudando HTML

  Responder comentário

• 9. Não funciona para mim...

  Sábado, 20/09/2008, por Mauricio Bivis
  

  Estou com o seguinte problema: a coluna auxiliar não está sendo exibida corretamente: Ela é exibida sem a cor verde de fundo e sem ir até o final da página.
  Eu consigo visualizar corretamente a página desenvolvida no tutorial. Porém, se eu pegar o código dela inteiro, e criar um index.htm com o código, e abrir de meu pc, tenho esse problema com a coluna auxiliar.
  Alguem sabe o que pode ser???
  (Acontece tanto quando aberto no firefox ou IE)

  Responder comentário

• 10. Boas Ferramentais

  Segunda-feira, 20/10/2008, por Daniel Andrade Cypreste
  

  Primeiro - Olha Mauricio Bivis!!!
  
  Va no navegar do FireFox e baixe um complemento chamado "FireBug", ultilize esse complemento quando você estiver na página que quiser.O FireBug tem um botão chamado "inspecionar" com ele você consegue ver todo o código do site, seja ele HTML, CSS, JavaScrit etc... .
  Depois compare o seu código com o do site que você deseja ver, caso o seu código estiver diferente concerte-o.
  
  Segundo - Mauricio Samy e todos!!!.
  
  Existe outro complemento chamado de "Web Developer"(quando forem proucura, proucure pelo nome "Developer") esse complemento possui uma aba chamada Tools(ferramentas) nessa aba há uma ferramenta chamada "Display page Validation", ou seja, "Mostrar página de validação", quando você ativar essa ferramenta aparecerá
  uma outra barra no navegador que terá uma descrição(Page Validation) e dois botões o 1° terá escrito(HTML: {dentro dessa area ele comunicará se o HTML está valitado ou não} ) o 2° terá escrito(CSS: {dentro dessa area ele comunicará se o CSS está valitado ou não}), caso o HTML ou o CSS estaja valitado aparecerá um símbulo verde de "Certo", caso não estaja valitado aparecerá um símbulo vermelho com um "!" e o numero de erros. Se você quiser ver quais foram os erros basta clicar em cima do "símbulo" que ele te levará ao site do valitador que você havia passado para o Eduardo, lá ele mostrará quais foram os erros além de dizer em qual linha e coluna que acontecera os erros.

  Responder comentário

• 11. Descobri o problema!

  Segunda-feira, 20/10/2008, por Mauricio Bivis
  

  Daniel! Muito obrigado pela ajuda, consegui descobrir o problema!
  
  Usei o firebug e fui retirando todos os atributos CSS pra descobrir em qual estava a diferença.
  O problema é que eu não estava com a figura "bg-auxiliar.gif", assim o background ficava sem a parte verde -- (#tudo {background: #FFFFFF url(bg-auxiliar.gif) repeat-y scroll right center} --.
  
  Bom... salvei uma figura e configurei o CSS igual ao site, e funcionou!
  
  Valeu!... abraço!
  

  Responder comentário

• 12. CSS

  Sábado, 11/04/2009, por Max Oliveira
  

  Perfeito Mauricio, ótimo artigo.

  Responder comentário

• 13. CSS

  Sábado, 11/04/2009, por Max Oliveira
  

  Perfeito Mauricio, ótimo artigo.

  Responder comentário

• 14. Resolveu meu Problema

  Quinta-feira, 18/06/2009, por Fabio Rodrigues Sodre
  

  Muito boa dica. Apliquei a regra no seguinte portal:
  www.cultura.ma.gov.br

  Responder comentário

Sobre o autor

Mauricio Samy é Engenheiro Civil formado pelo IME, ex-Professor de Geometria Descritiva e Matemática, autodidata em CSS e administrador do site www.maujor.com.

Indique para um amigo

Tags relacionadas

mobile brasil microsoft internet lançamento php crescimento twitter google android celular web yahoo mercado youtube desenvolvimento iphone 3g windows ti criação apple tecnologia seguranca linux publicidade

TI SHOP Produtos iMasters

• Lançamento: CD-ROM Treinamento Aplicado de SQL - Lançamento! Treinamento Aplicado de SQL - Aprenda a trabalhar com SQL com bancos de dados Oracle e SQL Server. São mais de 100 tópicos explicados por Mauro Pichilliani, um articulistas mais lidos do iMasters. Aproveite! Apenas R$ 69,90 no TI SHOP.
• Lançamento: Livro iMasters "O Encontro de 2 Mundos"- Este livro conta com 56 crônicas de profissionais mais admirados e influentes do mercado brasileiro de Internet. Aproveite o preço especial para leitores do iMasters. Apenas R$ 40,00 e envio imediato!
• DVD Curso Completo de Photoshop - Do conceito à finalização Lançamento! Curso Completo de Photoshop, em DVD, com mais de 230 aulas dividas em 4 módulos: conceito, básico, avançado e finalização. Apenas R$ 69,50 no TI SHOP - Frete com 50% de desconto
• DVD Javascript Starter - Curso Completo Com mais de 9 horas de vídeo-aulas, é um curso completo sobre Javascript. Ideal para quem deseja aprender a linguagem. Apenas R$ 64,90 no TI SHOP - Frete com 50% de desconto!