Banner propaganda da DevMedia - Cursos de desenvolvimento web

:: Posicionar o rodapé embaixo da janela ::

Introdução

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 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 sobre as CSS deste layout inicial. Para uma explicação detalhada da construção do layout ver o tutorial Layout CSS de 2 colunas com faux-column.

A marcação que adotaremos é 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%;
	...
	}

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

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. Role até o fim da página e observe 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. O rodapé tem 20px de altura e 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.

Conheça os livros do Maujor®

Clique a "capinha" para visitar o site do livro

capa livro jQuery capa livro ajaxjQuery capa livro css capa livro html capa livro javascript capa livro html5 capa livro css3 capa livro jQuery Mobile capa livro jQuery UI capa livro SVG capa livro RWD capa livro foundation capa livro HTML5 e CSS3 capa livro Bootstrap3 capa livro Sass e Compass

Publicado em: 2008-04-25

topo