introducción
Hace poco me preguntaron en clase cómo se puede hacer que un pié de página (footer) estuviera siempre abajo, incluso cuando no existe contenido suficiente.
La solución es relativamente sencilla. Se trata de jugar con valores negativos en el margen superior del footer.
Veamos primero el código y después lo analizamos:
El documento HTML
<div id="page-wrap">[contenido de página]</div> <div id="footer">[contenido de footer]</div>
y el documento CSS
html,body{ height:100%; } #page-wrap{ width: 960px; margin: auto; height: auto; min-height:100%; } #page-wrap:after{ width: 100%; height:150px; display:block; clear:both; } #footer{ width: 960px; height: 150px; margin: -150px auto 0; }
El “truco” está en que el page-wrap, el divisor que contiene todo el contenido salvo el footer, tiene una altura del 100% y un pseudo selector :after inferior de 150px.
Esto hace que cualquier contenido que haya dentro del page-wrap tenga siempre 150px de aire por abajo, dentro del divisor.
En la hoja de estilos, el footer tiene de alto 150px, al igual que el relleno del page-wrap, y además tiene un margen superior negativo de 150px también, lo que hace que se coloque por encima del pseudo selector :after inferior del page-wrap.
En este ejemplo se ha empleado un valor de 150px, pero se puede cambiar por cualquier otro.