Colocar Rodapé fixo no fim da página
Você já deve ter precisado colocar o footer fixo no rodapé quando houve pouco conteúdo na página. Normalmente os clientes chatos acham feito aquele rodapé terminando no meio da página quando há pouco conteúdo. Há uma técnica no CSS que nos permite fazer essa façanha. Não funciona no IE6. Na verdade, tem um jeito de funcionar, mas não quero te acostumar mal a fazer técnicas funcionarem em browsers ruins.
Lembrando que você pode fazer isso facilmente com JQuery.
Suponha que você tenha o código HTML:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd"> <html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en"> <head> <meta http-equiv="Content-Type" content="text/html; charset=utf-8"/> <title>Webmasters Online</title> </head> <body> <div class="geral"> <div class="header"> HEADER </div> <div class="aside fleft"> ESQUERDA </div> <div class="aside fright"> DIREITA </div> <div class="content"> <p>Lorem ipsum dolor sit . </p> <p> Duis id metus enim, sed dignissim magna.</p> </div> <div class="footer"> FOOTER </div> </div> </body> </html>
E o seguinte CSS:
* { margin:0; padding:0;}
html, body {height:100%;}
.geral { min-height:100%; position:relative; width:800px;}
.footer { position:absolute; bottom:0; width:100%;}
.content {overflow:hidden;}
.aside {width:200px;}
.fleft {float:left;}
.fright {float:right;}