CSSLab

¡Aaaaabajo!

Los pies de página, o footers como prefiero llamarlos, han demostrado ser un importante factor gráfico a la hora de armar sitios web, o más comúnmente, blogs. Puedes dejar estampado los derechos reservados de tu sitio, si valida, si no valida, una firma, una forma, algo importante y que debería siempre estar presente, después de todo el contenido. Existen varias formas de construirlo, aquí demuestro una bastante ingeniosa que no deja de ser interesante tener en cuenta. El código completo podrán digerirlo en la página misma de ejemplo, pero quiero hacer hincapié en 2 elementos importantes y que marcan la diferenciación de esta técnica:

/* hacks varios, adivinen para q browser… */
html, body, #contenedor {
     min-height: 100%; /* alto minimo FF y Safari */
     width: 100%;
     height: 100%; /* alto minimo para IE Windows */
     margin: 0;
     padding: 0;
}
html>body #contenedor {
     height: auto; /* con este hack escondemos el min-height de IE*/
}
/* fin hacks varios */

Estos hacks fueron necesarios a la hora de que IE6 hiciera caso al alto de la ventana total del browser, dado que no soporta la propiedad min-height. Es un pequeño truco que resulta para suplir esta falencia. Se supone que estará solucionado en IE7.

#footer {
     position: absolute;
     bottom: 0;
     width: 80%;
     margin-left: 10%;
     font-size: 11px;
     font-weight: bolder;
     color: #C00;
     text-align: center;
}

Esta es la otra parte crucial del código. Aquí, se le dice al div footer que se quede pegado al borde inferior del browser (bottom: 0;), posicionado absolutamente. El resto, mera estética.

Ver ejemplo

Pueden escalar la ventana de su browser para comprobar que realmente el footer permanece por debajo de todo el contenido.

Probado en IE6, Safari, Firefox, Opera.