Sem introdução, layout html:
<body>
<div class="wrapper">
<div class="wrapper-main">
<div class="wrapper-header">
<a href="/">Home</a>
</div>
<div class="wrapper-content">
your page content
</div>
</div>
<div class="wrapper-footer">
<span>my footer is at the bottom</span>
</div>
</div>
</body>
Sobre o css:
html, body { height:100%; }
.wrapper {
min-height:100%;
height:auto !important;
position:relative;
}
.wrapper-main {
width:1024px;
margin:0 auto;
padding-bottom:30px; /* Height of the footer */
}
.wrapper-footer {
height:30px;
position:absolute;
bottom:0;
}
Existem várias maneiras de colocar o rodapé no final, mas optei por apresentar esta aqui, que é bastante fácil de usar.
O mais importante de entender é esta solução requer que você saiba a altura do seu rodapé. Caso contrário, você deve usar outra técnica.
Compatível em todos os navegadores.