Desenvolvimento - CSS
Posicionar o rodapé embaixo da janela
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.
por Maurício Samy SilvaIntroduçã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#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:
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).
