Directamente desde Gloobs - Blog de diseño web os dejo las instrucciones para hacer un pie de página que siempre está visible, de tal modo que el diseño siempre ocupa el 100% de la altura del monitor. Esta práctica no tiene mucha utilidad si la web es demasiado alta, pero en web de presentación de empresas o portfolios es realmente útil.

Para todos aquellos que queráis ver el tutorial en inglés este es el enlace. Para el resto, esto es lo que hay que hacer:

<div id="contenedor-general">
<div id=”contenedor-contenido”>Contenido</div>
<div id=”contenedor-pie”>Pie</div>
</div>
Como veis lo primero a destacar es que tanto el contenedor que contiene el contenido como el que contiene el pie están siempre dentro de un contenedor general que los aglutina.

A continuación empezamos con la CSS, y para empezar definimos las características generales de la página para que el pie pueda verse bien en todos los navegadores.
html, body {
margin: 0;
padding: 0;
height: 100%;
}
A continuación el contenedor general
#contenedor-general {
width: 600px;
background: #DDD;
position: relative;
min-height: 100%;
height: auto !importante;
height: 100%;
}
Ahora definimos el contenedor del contenido principal:
#contenedor-contenido {
padding-bottom: 40px;
}
Y finalmente llegamos al pie
#contenedor-pie {
width: 100%;
background: #CCC;
position: absolute;
bottom: 0 !importante;
bottom: -1px;
height: 40px;
}
Existen otras formas de hacerlo, pero esta es la más “pura” que he visto hasta ahora y las más recomendable.
Si queréis ver un ejemplo de cómo funciona esto lo podéis ver aquí (agrandad y empequeñecer la pantalla del navegador para que veáis como se queda siempre el pie pegado al margen inferior de la pantalla.