es este:
PIE SIEMPRE ABAJO
Esta es una pregunta recurrente en todos los foros y sitios de consulta dedicados al diseño web y las hojas de estilo CSS: ¿cómo consigo que el pie de mi página quede siempre abajo, pegado a la parte inferior de la misma, haya poco o mucho contenido? Y es que la respuesta parece sencilla, pero como veremos a continuación no lo es tanto.
Lo que generalmente se quiere conseguir debe cumplir estos requisitos:
- que cuando haya poco contenido, y por tanto no llene la página, el pie aparezca pegado a la parte inferior de la misma.
- que esté por completo a la vista sin partes ocultas por debajo y que no aparezca el scroll cuando no sea necesario.
- que cuando el contenido crezca, el pie acompañe al crecimiento vertical de la página y siga pegado a la parte inferior tras el contenido, haciendo tope en la parte de abajo, sin ocultar o superponerse al contenido y que aparezca el scroll vertical.
Normalmente, cuando pensamos en esto tenemos tendencia a imaginar que es muy fácil, que hacemos cosas parecidas constantemente, pero cuando empezamos a probar y necesitamos obtener una solución compatible con la mayor cantidad posible de navegadores, nos empezamos a dar cuenta de que el asunto tiene más miga de lo que parece. Pruebas habituales son:
1.- Marco el pie con posición absoluta abajo (bottom:0) y listo. Error: en ese caso, cuando el contenido crece el pie no lo acompaña y no baja, quedando estático sobre el contenido.
2.- Marco el contenido con un 100% de altura (height: 100%). y luego el pie. Error: aparece el scroll siendo innecesario por el escaso contenido, aparte de que suele haber una cabecera que sumar al 100% del contenido.
3.- Entonces, lo meto dentro y le doy un margen negativo. Error: al crecer el contenido se solapa sobre el pie.
4.- Lo pongo fuera del contenido sin marcar a éste altura. Error: queda a mitad de página o donde termine el contenido cuando es escaso.
Y un larguísimo etcétera de pruebas que cualquiera de nosotros habrá hecho infinidad de veces.
Entonces, ¿cuál es la solución?
Planteamos una estructura clásica con una cabecera, un bloque de contenido y un pie, y como envoltorio un contenedor principal:
<body>
<div id="contenedor">
<div id="cabecera">
</div>
<div id="contenido">
</div>
</div>
<div id="pie">
</div>
</body>
En la que llama la atención que estamos dejando el pie fuera del contenedor principal, y que la cabecera y el contenido están dentro de él. Y ahora planteamos el problema con la hoja de estilo:
html, body { height:100%;}
#contenedor {
min-height:100%;
height: auto!important;
height:100%;
}
#cabecera{ height: 4em;}
#contenido {}
#pie {
height: 3em;
margin-top: -3em;
}
.corte {
clear: both;
padding-top: 4em;
}
En la que empezamos por indicar una altura mínima de 100% (min-height: 100%), una altura en auto (height: auto), para que crezca lo necesario y por último usamos el atributo !important para que los navegadores que respetan los estándares utilicen auto, y que IE6 y anteriores utilicen una altura del 100%. A este respecto cabe recordar que aunque IE6 no entiende el min-height, tampoco es necesario en general ya que como, al contrario de la mayoría, en IE6 las cajas siempre crecen tengan lo que tengan dentro, el height actúa como mínimo, nunca como máximo ni como estático, así que con decirle la altura fija él la ignorará y la tomará como altura mínima.
Y para que esa altura funcione correctamente con respecto a algo (su contenedor), evidentemente empezamos por poner un 100% al html y el body.
A continuación seguimos con una cabecera de la altura que nos interese, sin tener ninguna influencia en el resto de elementos por cómo van a estar configurados.
Contrariamente a lo que pueda parecer, el selector del contenido no va a tener marcada ninguna altura, ni mínima ni estática, porque el meollo de la cuestión no estará ahí, y de momento aparece vacío porque no necesita nada para la estructura, y es donde pondremos estilos de decoración del bloque.
Una de las cosas más importantes será realizar un corte tras el contenido, porque si no en determinados casos el pie quedaría sobre él, y la razón es la siguiente: por ejemplo en Firefox, si ponemos dentro del contenido cajas que estén flotadas (float: left, etc.), éstas no fuerzan a crecer a su contenedor porque no ocupan espacio físico vertical en el flujo del documento, y por lo tanto, al no crecer el contenedor el pie no se vería desplazado y quedaría sobre el contenido de esas cajas. Forzando pues un corte tras el contenido pero dentro del contenedor, obligamos a que éste crezca inevitablemente aunque las cajas estén flotadas, de manera que conseguimos lo que queremos. Es muy importante marcar en la clase del corte un relleno inferior (padding-bottom: 4em;), que obligue al pie a mantenerse a una distancia prudencial del contenido, de manera que cuando éste crezca, el pie sea empujado correctamente y nunca se solapen.
Lo hacemos de esta manera en lugar de usar un overflow: auto;, que podría servir, porque en Internet Explorer no funcionaría.
Y por último la importancia del pie, que gracias a estar ubicado fuera del contenedor principal, que mide un 100%, será colocado en su lugar gracias a un margen superior negativo (margin-top: -3em;), igual a su propio tamaño (height: 3em;).
Añadimos algo de contenido y los adornos con los colores de fondo y demás para que se vea todo correctamente, y finalmente queda como en este ejemplo:
Ejemplo
Código HTML
CSS completo
Puede que algo parecido se haya escrito infinidad de veces, pero personalmente he encontrado en la red una gran cantidad de ejemplos que, o bien no cumplen exactamente con todos los requisitos planteados en el inicio del artículo, o no funcionan correctamente en todos los navegadores. Esta solución ha sido chequeada en una buena cantidad de ellos (FF 2 y 3, IE5, 6 y 7, Opera, Safari, etc.), y funciona muy bien, y lo que es más importante para mi, sin hacks, "comentarios condicionales" ni filigranas varias de adaptación. Es casi 100% compatible a excepción del !important citado, que al fin y al cabo es un recurso perfectamente válido de CSS.
Espero que a algunos de vosotros os pueda servir de algo, como ya lo ha hecho a un buen montón de usuarios de forosdelweb.com
Un saludo y hasta la próxima.
Mikel Morote