Footer siempre abajo

Modifica la altura de tu navegador y podrás comprobar como el <footer> inferior siempre está enganchado en la parte baja de la ventana del navegador, excepto cuando el contenido de la página no cabe. En este caso el footer no tapa el contenido, sino que baja todo lo que sea necesario.

Para conseguir ésto basta con añadir algunos selectores CSS:

html, body{
   height:100%;
}
.contenido{
   min-height:100%;
   margin:0 auto -142px;
}
.espacio_vacio{
   height:90px;
}

Para que este CSS funcione tendrás que añadir dos DIVs a tu html:

.contenido es un div con un class llamado 'contenido', que se abriría justo después de abrir el <body>, y se cerraría justo antes de abrir el <footer>.

.espacio_vacio es otro div (en este caso vacío), que se abriría y se cerraría justo antes de cerrar el </div> anterior.

-142px es el espacio que se deja en la parte vacía y 90px son los píxeles de altura que tiene el footer.

Si existen problemas, añadir la altura (height) a las cajas (div) que contenga el contenido.