Páginas

segunda-feira, 3 de outubro de 2011

Rodapé sempre embaixo

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;
}

Nenhum comentário:

Postar um comentário