Desplazarse al índice de navegación.
Sin más preámbulos, el objetivo es crear un modelo simple de pie de página, o sea, una caja que quede al final del documento y que, si el contenido no ocupa todo el espacio útil de la pantalla, quede colocado en su parte inferior, y no inmediatamente debajo. Esto lo lograremos utilizando posicionamiento absoluto.
Para ponerlo en marcha, montamos una estructura con una caja que contenga a todo lo demás (podría ser el propio body, pero algunos navegadores no lo interpretarían como queremos), dentro del cual anidamos dos elementos, uno para el contenido general y otro para el pie de página. La razón para ese primer contenedor es poder asignarle un relleno inferior para que el pie de página no quede por encima de su contenido. El código podría ser así:
<body>
<div id="Todo">
<div>
<h1>
Contenido...
</h1>
<p>
Más contenido...
</p>
<p>
Y más...
</p>
</div>
<p id="Pie">
Pie de página.
</p>
</div>
</body>
La hoja de estilos a aplicar es también muy simple. Solamente hay que jugar un poco con los selectores para que Internet Explorer interprete una cosa y el resto de navegadores otra.
html, body, #Todo {
height:100%; min-height:100%;
}
#Todo {
position:absolute;
}
html > body, html > body #Todo {
height:auto;
}
#Todo div {
padding-bottom:2em;
}
#Pie {
position:absolute; bottom:0;
}
Y eso es todo. No hay razones para pensar en una catástrofe si no funciona como esperamos. En el peor de los casos el pie de página no quedará en la parte inferior, sino simplemente a continuación del contenido. Para terminar este fugaz apunte, un ejemplo del modelo.
04/12/2002. sysifus. Recorte nº 10.
Estás en: tierra de nómadas > recortes > Colocar un pie de página mediante CSS.