Pie Siempre abajo

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 quiereconseguir 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 parteinferior 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 empezamosa 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 elescaso 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 denosotros 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:












En la que llama la atención que estamos dejando el pie fuera del contenedor principal, y que la cabecera yel 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 unaaltura 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 dela 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 unacabecera 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...