Técnica CSS para pies de página

El buenazo de Paul Boag nos remite una técnica muy interesante usada por Ed Merrit, uno de sus diseñadores en Headscape, para hacer pies de página fijos sin javascript, que se queden hasta abajo de la ventana si el contenido es corto, pero que se muestren abajo del contenido si éste es largo.

Usando las propiedades position: fixed; bottom: 0; puedes lograr que el pie de página se quede anclado a la parte inferior de la ventana, pero no se moverá con el contenido si éste es más alto que la ventana. Generalmente el problema se resuelve usando javascript: lees la altura del contenido, lo comparas contra la altura de la ventana y aplicas el posicionamiento que corresponda.

Sin embargo no siempre es conveniente usar javascript ya que puede estar deshabilitado, es una lata asegurarse que funcione en todos los navegadores y siempre es más recomendable resolver un problema de presentación usando css puro.

La técnica mostrada es puro css y dice como sigue:

html


<div id="contenedor">
<div id="contenido"></div>
<div id="pie"></div>
</div> 

O sea, creamos una capa que rodée al contenido y al pie.

css


*, body {margin: 0; padding: 0;}
#contenedor {display: block; position: absolute; min-height: 100%;}
#contenido {display: block; margin-bottom: 3em;}
#pie {position: absolute; display: block; bottom: 0; height: 3em } 

Si tienes experiencia usando css seguro que habrás pensado “¡ajá! esto no va a funcionar en IE6” y tienes razón.

Para que funcione hay que poner:

body, #contenedor {height: 100%;}

de preferencia en una hoja de estilos separada llamada mediante comentarios condicionales.

Y ahí lo tienen, eso es todo. Hay algunas consideraciones que se cubren en la página original, pero los invito a experimentar con esta técnica.

  • Hola, roberto, en el ultimo cuadro dice: #container y es #contenedor.

    Si quieres puesde borra este comentario no importa, es solo una ayuda.

  • ¡Gracias!

    Je, je. Meses y meses y no me había dado cuenta. ¡Corregido!

  • rafael

    perfecto, jefe