Blog Web Standards

Soluções para os problemas enfrentados pelos desenvolvedores HTML e CSS no dia-a-dia

17 2009 fevereiro

Rodapé fixo

Autor: g3 em CSS

Última modificação: 22 outubro 2009

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.

16 comentários

Responder
  1. 6 de março de 2009

    Magda 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!

  2. 3 de junho de 2009

    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!

  3. 3 de junho de 2009

    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!

  4. 20 de agosto de 2009

    Sérgio Lemos disse:

    @Luana: Utilize o position: fixed, juntamente com bottom: 0, que dar certo ok.

  5. 3 de setembro de 2009

    Cesar Kohl disse:

    Bem legal este tutorial! Estava tentando fazer exatamente isso ha alguns meses atras e nao conseguia! Valeu!

  6. 17 de outubro de 2009

    luiz carlos bartolossi disse:

    testem no firefox e no ie7 com bastante conteudo.
    dá pau

  7. 22 de outubro de 2009

    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.

  8. 28 de outubro de 2009

    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

  9. 22 de abril de 2010

    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 🙂

  10. 1 de agosto de 2010

    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

  11. 18 de outubro de 2010

    Flávio disse:

    Muito Legal!! Depois de várias tentativas com vários códigos diferentes… consegui fazer funcionar!! Como o meu site é em asp.net bastou acrescentar o form aqui: html, body, form { height: 100%; }

    Aí ficou tudo certinho… valeu!!!

  12. 21 de outubro de 2010

    Leonardo Cavalcante disse:

    @Luana:
    Position:fixed;
    bottom:0;
    z-index:9999999999;

    Problema: mobile nao aceita fixed, como o ipad,
    tenta usar como absolut tbem…

  13. 7 de maio de 2011

    Lia disse:

    funcionou em todos os browsers que testei 😀
    adorei o site, só acho que vcs poderiam fazer os exemplos mais objetivos, sem código irrelevante, como background, color, etc.

  14. 6 de junho de 2011

    Henrique Almeida disse:

    Após muitas horas de procura no google o único que funcionou Parabéns e Obrigado! =D

  15. 4 de outubro de 2011

    Gwenn Wilkerson disse:

    @Luana: Ola Luana, da uma olhadinha nesse site..
    Acredito que vai ser bem útil..
    Abraços..

    http://www.cssstickyfooter.com/br/using-sticky-footer-code.html

  16. 5 de janeiro de 2012

    João Carlos disse:

    Saudações, Parabéns pelo tutorial.
    Estou com uma dificuladade, eu uso divs “position:absolute;” dentro do meu conteúdo
    .center{ position:absolute; width:1024px; left:50%; margin-left:-512px;}
    e o rodapé as esta ignorando podem ajudar ?

Escreva seu comentário