Trucos CSS: pie de página fijo

Trucos CSS: pie de página fijo

En este caso se trata de 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.
De todos los ejemplos que circulan por ahí, creo que el mejor es este que os apunto en este post.

Se trata de una práctica no muy aprovechada debido a la altura excesiva que normalmente tienen los sitios, pero para casos en los que se trate de una web no muy grande, como un porfolio o una web de una empresa, se trata de una práctica que puede ser muy útil y visual.

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.