Faça o curso: jQuery na Prática

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...