O post seguinte ensina como fazer um rodapé fixo no fim da página independente do conteúdo.
Primeiro passo é escrever um XHTML na seguinte estrutura:
... <body> <div id="limites"> <div id="conteudo" class="contemfloat"> <div id="coluna1"> Coluna 1 </div> <div id="coluna2"> Coluna 2 </div> </div> <div id="rodape"> Rodapé </div> </div> </body> ...
A div#rodape tem que estar no mesmo nível que a div#conteudo dentro da div#limites.
|-----------------------------------| | body | | | | |-------------------------------| | | | | | | | limites | | | | | | | | |-------------------------| | | | | | | | | | | | conteudo | | | | | | | | | | | | |-------------------| | | | | | | | coluna1 | | | | | | | |-------------------| | | | | | | | coluna2 | | | | | | | |-------------------| | | | | | | | | | | | |-------------------------| | | | | | | | | |-------------------------| | | | | | rodape | | | | | |-------------------------| | | | | | | | |-------------------------------| |
Feito o XHTML escreva os seguintes estilos(CSS):
* { margin: 0; padding: 0; z-index: 1; }
html, body { height: 100%; }
/* contendo float */
.contemfloat:after { content: "."; display: block; height: 0; clear: both; visibility: hidden; }
.contemfloat { display: inline-block; }
/* Hides from IE-mac \*/
* .contemfloat { height: 1%; }
.contemfloat { display: block; }
/* End hide from IE-mac */
#limites { position: relative; width: 600px; min-height: 100%; margin: 0 auto; background-color: #eee; }
* html #limites { height: 100%; }
#conteudo { padding-bottom: 80px; border-bottom: 1px solid red; }
#coluna1 { float: left; width: 400px; background-color: #ecc; }
#coluna2 { width: 200px; margin-left: 400px; background-color: gray; }
#rodape { position: absolute; bottom: 0; left: 0; width: 600px; height: 50px; padding-top: 10px; background-color: #cce; text-align: center; }
No html, body e div#limites precisam ter altura 100%. No caso da div#limites coloque altura mínima (min-height) 100%, mas como essa propriedade não renderiza no Internet Explorer 6 é preciso adicionar uma linha apenas para o IE6 com altura (height) 100%, isso funciona porque o IE6 não respeita uma altura definida caso o conteúdo do elemento ultrapasse essa altura.
Atenção, A div#limites tem posição relativa para possibilitar a div#rodape ficar sempre na base da div#limites em posição absoluta.
No XHTML foi inserido a classe “contemfloat” na div#conteudo porque dentro dela contém elemento com float.
No CSS a div#conteudo deve ter valor no padding-bottom igual ou maior que a altura da div#rodape, isso é feito para a div#rodape não ficar por cima da div#conteudo.
No exemplo a div#conteudo está com uma borda vermelha para mostrar o espaço do padding-bottom entre o conteúdo até a borda.
Veja o exemplo.
10 comentários
ResponderMagda disse:
Depois de tentar diversas maneiras e de ver os mais variados exemplos de soluções, o seu foi o único que funcionou de verdade! Pra qualquer resolução de browser com qualquer height de conteúdo!
Parabéns!!
Depois te mando o site onde vamos aplicar!!
Valeu!
Luana disse:
Olá! Estou procurando na internet um tutorial que ensine como fazer o rodapé ficar posicionado embaixo da tela mas não abaixo de todo conteúdo, mas sim quando rolasse a página apenas o conteúdo rolasse e o rodapé ficasse por cima de tudo, ainda aparecendo na tela, entenderam? Já tentei fazer mas não deu certo. Vocês tem alguma dica?
Fico aguardando. Obrigada!
Carlitos disse:
@Luana
Luana, pra fazer esse tipo de rodapé é bem tranquilo.
É só usar as propriedades “position: fixed; bottom: 0;” fazendo com que o rodapé fique sempre no final da tela, mas isso não funciona no nosso amigo IE6.
Aí entra uma gambiarra: defina “overflow: auto” no body e “position: absolute;” especificamente para o IE6 que dará certo… Mas não é lá muuuito recomendado hehehe
Imagino que dê pra fazer com javascript, mas foge da nossa alçada!
Sérgio Lemos disse:
@Luana: Utilize o position: fixed, juntamente com bottom: 0, que dar certo ok.
Cesar Kohl disse:
Bem legal este tutorial! Estava tentando fazer exatamente isso ha alguns meses atras e nao conseguia! Valeu!
luiz carlos bartolossi disse:
testem no firefox e no ie7 com bastante conteudo.
dá pau
g3 disse:
Obrigado pelo comentário Luiz B.
Na verdade esta renderizando correto, o caso era que a div#coluna1 e div#coluna2 estavam com altura (height), então se alguém copiou o código do exemplo para resolver e não “dá pau” é só remover a altura da div#coluna1 e div#coluna2.
Caso mantenha a altura o código vai renderizar dessa forma em todos os navegadores bons, exceto no Internet Explorer 6 (e versões anteriores), pois o IE6 não consegue manter a altura do elemento quando o respectivo conteúdo ultrapassa seus limites.
Por isso que o nosso exemplo não estava bugando quando executado no IE6 e sim no FF e IE7.
Mas para evitar qualquer problema eu removi a altura do exemplo e da explicação.
JrGodoi disse:
Quando preciso eu utilizo a solução Sticky Footer. Acho mais simples, mesmo porque esta solução já utiliza também o excelente clearfix.
http://www.cssstickyfooter.com/
Abraços,
JrGodoi
Marcus disse:
até que emfim uma solução que realmente funciona. E o pior (melhor) é que as técnicas usadas são as mais comuns. – Basta saber usar e combinar
Obrigado pessoal
Desenvolvimento de Sites Curitiba disse:
Amigos meus parabéns, estava quebrando a cabeça a algum tempo com essa coisa de conseguir deixar o footer fixo no fim da página, já tinha tentado várias coisas e nada tinha funcionado, agradeço a quem teve a iniciativa de fazer esse tutorial e disponibilizar na web.
[]s