Esse é um problema clássico que todos nós desenvolvedores já passamos. Já cruzei com mil soluções para o problema, porém esse final de semana precisei de algo e nas minhas pesquisas encontrei uma solução que funcionou perfeitamente, melhor do que quaquer uma que já tenha usado.

O Problema

http://www.oficinadanet.com.br//imagens/coluna/3368//o-problema-rodape.jpg


Como vemos na imagem acima, o rodapé do site seguindo uma estrutura normal de HTML ficaria logo após a div do conteúdo.

A solução

http://www.oficinadanet.com.br//imagens/coluna/3368//a-solucao-rodape.jpg


Como vemos na imagem acima, esse é o resultado final que queremos.

O código HTML


   </div>
   </div>
   </div>
</div>



O código CSS

html,
body {
   margin:0;
   padding:0;
   height:100%;
}
.tudo {
   min-height:100%;
   position:relative;
}
.topo {
   background:#ff0;
   padding:10px;
}
.conteudo {
   padding:10px;
   padding-bottom:60px;   /* Mesma Altura do Rodapé */
}
.rodape {
   position:absolute;
   bottom:0;
   width:100%;
   height:60px;   /* Mesma Altura do Rodapé */
   background:#6cf;
}



Por que essa é a melhor solução?

  • Funciona em praticamente todos os browsers (menos em IE 6, existe solução mas não vou nem postar Wink)
  • CSS 100% válido e sem Hacks
  • Sem javascript




Resultado: (ver em tela cheia)