Como utilizar o Código do Rodapé Fixo
Leia as Notas no fim desta página. Isto vai prevenir vários erros que podem resultar em horas de debug.
Introdução
Existem muitos métodos de rodapés fixos encontrados no Google. Eu experimentei muitos deles e geralmente eles falham em algum ponto. O problema parece ser que alguns destes métodos são antigos e funcionavam em navegadores antigos, mas não nos novos. Pelo fato destas páginas serem antigas e ligadas ao passado, ainda são bem posicionadas no Google. Muitos webmasters procuram por uma solução de rodapé fixo e acabam coçando a cabeça enquanto tentam estes mesmos métodos antigos porque eles são os primeiros da lista na busca.
A solução do Ryan Fait's é bem conhecida, e ainda funciona, mas requer uma <div> extra sem conteúdo, para dar um "empurrãozinho". Alguns puristas em HTML podem achar isso uma blasfêmia (usar código não-semântico). Nossa solução evita a <div> extra.
A Solução de Rodapé Fixo apresentada aqui é baseada na informação encontrada no artigo Exploring Footers, da A List Apart assim como uma expansão do trabalho de Cameron Adams e este texto em lwis.net.
Numa versão anterior era aplicado um hack de clear fix para manter o rodapé embaixo no Google Chrome e outros navegadores onde ele ficaria flutuando quando a janela fosse redimensionada. Ao invés disso, depois de algum feedback, esta versão atualizada simplesmente usa overflow:auto, como sugerido por Joel Pittet, para fazer o mesmo trabalho. Paul O'Brian sugeriu a adição do display:table para IE8, assim como o artigo dele aqui tem uma boa sugestão de um conserto para Opera que também usamos aqui. Foi testado em amis de 50 navegadores e parece funcionar perfeitamente.
O Código HTML
Abaixo está uma estrutura básica do código HTML. Note como o <div> do rodapé está fora do <div> wrap.
<div id="wrap"> <div id="main"> </div> </div> <div id="footer"> </div>
Você coloca os elementos de conteúdo dentro do <div> main. Por exemplo, se estiver usando um layout de 2 colunas flutuantes (float) você terá isto;
<div id="wrap"> <div id="main"> <div id="content"> </div> <div id="side"> </div> </div> </div> <div id="footer"> </div>
Um cabeçalho pode ser inserido dentro do wrap, mas acima do main, assim;
<div id="wrap"> <div id="header"> </div> <div id="main"> </div> </div> <div id="footer"> </div>
Se você quiser colocar qualquer elemento fora do wrap ou do footer, então você precisará usar posicionamento absoluto (position: absolute) caso contrário vai bagunçar o cálculo de 100% de altura.
O Código CSS
Abaixo está o código CSS que faz o seu rodapé de fato ficar no pé da página.
html, body, #wrap {height: 100%;}
body > #wrap {height: auto; min-height: 100%;}
#main {overflow:auto;
padding-bottom: 150px;} /* deve ter a mesma altura do rodapé */
#footer {position: relative;
margin-top: -150px; /* valor negativo da altura do rodapé */
height: 150px;
clear:both;}
/*Opera Fix*/
body:before {
content:"";
height:100%;
float:left;
width:0;
margin-top:-32767px;/
}
E a sua página html vai precisar desta condicional, direcionada ao IE8;
<!--[if IE 8]>
<style type="text/css">
#wrap {display:table;}
</style>
<![endif]-->
Note que a altura do rodapé é usada três veses. Isto é importante e deve ter o mesmo valor nas três instâncias. As propriedades de altura esticam a <div> wrap para a altura total da janela. A margem negativa do rodapé traz ele para o padding criado na <div> main. Uma vez que o main está dentro do wrap, a altura de padding faz parte dos 100%. ASsim o rodapé fica no pé da página.
O comentário condicional é necessário para permitir que o IE8 se expanda além da altura de 100%. O outro hack, é para o Opera.
Clearfix Hack Desnecessário!
Muitos designers CSS estão familizarizados com o Hack Clearfix, Ele soluciona uma série de problemas com elementos flutuantes (float). Uma versão anterior desta Solução de Rodapé Fixo a usava. Mas ao invés disso, uma solução de código mais moderna e fácil é a regra de overflow. Nós aplicamos ela à <div> main para ajudar o rodapé a ficar fixo no Chrome. Também resolve questões que aparecem quando se usa um layout em colunas, flutuando o conteúdo para um lado e a barra lateral para o outro. O Conteúdo de elementos flutuantes dentro da <div> main pode fazer com que o rodapé se desprenda em alguns navegadores.
Notas
Heights e Margins
Usar margens de top e bottom dentro de alguns elementos podem empurrar o seu rodapé para além da altura de margem, talvez num cabeçalho ou na wrap ou main. Ao invés, use padding para criar espaço dentro do elemento. Você vai notar que isto está acontecendo se a sua página tiver pouco conteúdo, então o rodapé estará no pé da página mas você terá uma barra de rolagem lateral, indicando que ele está abaixo da altura da janela. Encontre as margens de top ou bottom ofensivas e as altere para padding.
Tenha cuidado ao declarar padding na <div> main em outra parte do seu arquivo CSS. Se você quiser adicionar algo assim: padding:0 10px 0 10px; você acabará sobreescrevendo o padding de baixo, que precisa ter a mesma altura do seu rodapé. Isso vai fazer com que o seu rodapé fique por cima do seu conteúdo nas páginas mais longas (no Google Chrome).
Cuidado se você estiver usando bordas no seu rodapé. Se você adicionar uma borda de 1px no seu rodapé de 200px, use 201px como o valor de margem negativa no #footer e 201px como o seu padding de baixo no main para compensar este 1 pixel extra.
Tamanhos de Fontes
Quando definir tamanhos de fontes no seu CSS, se estiver usando tamanhos relativos fique atento que alguns usuários podem ter as suas definições de monitor para fontes maiores. Em alguns elementos, como o rodapé, isso pode quebrar a altura e criar um vazio abaixo do rodapé, caso exista espaço suficiente para o texto se expandir para baixo. Então procure usar tamanhos absolutos, com px ou em. Ou deixe bastante espaço de expansão previstos no seu rodapé.
Plataformas .NET
Quando escrever sites para ASP.net, onde cada página reside dentro de um <form>, tenha certeza de adicionar o tag form na declaração de height:100%, caso contrário ele vai quebrar o rodapé fixo. Assim;
html, body, form, #wrap {height: 100%;}
