Desenvolvimento - CSS
Posicionar o rodapé embaixo da janela
por Maurício Samy Silva
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 (abre em outra janela) você poderá visualizar o problema e neste link (abre em outra janela) 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#rodapeNota: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:
O Código
<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 (abre em outra janela).
A estrutura de marcação com o acréscimo para obter o layout inicial é a seguinte:
O Código
<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 (abre em outra janela)a renderização e as respectivas regras CSS do layout inicial e a seguir veja em uma página com muito conteúdo (abre em outra janela) 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 (abre em outra janela)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:
O Código
height: 100%;
}
#tudo {
min-height: 100%;
...
}
/* hack para IE6 que trata height como min-height */
* html #tudo { height: 100%; }
Posicionando o rodapé
Para posicionar o rodapé "empurrando-o" para o limite inferior da janela usaremos posicionamento absoluto acrescentando as seguintes regras CSS:
O Código
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 (abre em outra janela).
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 (abre em outra janela)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 é:
O Código
padding-bottom: 30px;
}
E finalmente o rodapé corretamente posicionado conforme proposto no início do tutorial nesta página com pouco conteúdo (abre em outra janela)e nesta página com muito conteúdo (abre em outra janela).
Créditos:
Esta técnica foi originalmente desenvolvida por SolarDream Studios (abre em outra janela) e aperfeiçoada por The Man in Blue (abre em outra janela).
Interessado em Padrões Web? Visite o Site do Maujor (abre em outra janela).
