Rodapé sempre embaixo

<< Click to Display Table of Contents >>

Navigation:  Html >

Rodapé sempre embaixo

Previous pageReturn to chapter overviewNext page

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

 

 

o-problema-rodape

 

 

 

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

 

 

a-solucao-rodape

 

 

 

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

 

O código HTML

 

<div class="tudo">

   <div class="topo"></div>

   <div class="conteudo"></div>

   <div class="rodape"></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