Normalmente al crear una página, el pie de pagina o footer se sitúa justo por debajo del contenido, por lo que si tenemos poco o ningún contenido, el pie de pagina se verá demasiado alto. Hay una forma de solucionar esto a través de CSS, consiguiendo así que el pie de pagina siempre se mantenga en la parte inferior de la ventana, aunque el contenido no ocupe el 100% de esta.
Documento de Ejemplo
|
1 2 |
<div id="page-wrap">[contenido de página]</div> <div id="footer">[contenido de footer]</div> |
Documento CSS
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 |
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; } |
Con esto conseguimos que el contenido tenga siempre una altura del 100%, dejando 150px al final de la página para nuestro footer, este, con un margen negativo, se coloca “por encima” del contenido, sin llegar a taparlo nunca por ese margen de 150px que hemos dejado. Estos 150px pueden cambiarse a la altura que quieras, cambiando la altura del “page-wrap:after” y “footer”, así como su margen negativo.
Fuente: http://www.luisherrero.es/el-footer-que-siempre-esta-abajo/