Seguro que alguna vez os ha pasado que os trabajáis una maquetación que se ve de puta madre en vuestra pantalla de 15 pulgadas, pero al verla en una 22… ale, el pie al medio de la página. No hay contenido suficiente para llenar toda esa pantalla. Una opción es usar un posicionamiento absoluto, pero claro, si es una web con varias páginas igual en otra sí tienes suficiente contenido y entonces te queda un pie fijo en la parte de abajo del monitor aunque tengas que scrollear para ver toda la info.

Pero hay una solución, básicametne consiste en envolver todo el contenido superior al footer en un div contenedor, darle un alto mínimo del 100% de la pantalla, meterle debajo un margen negativo y allí insertar el pie. Ok, dicho así suena muy árido. Vamos con un ejemplo progresivo. Imaginemos que el que sigue es nuestro código:

<div id="header">Aquí la cabecera</div>
    <div id="nav">
       <ul>
          <li><a href="#">Inicio</a></li>
          <li><a href="#">Primera</a></li>
          <li><a href="#">Segunda</a></li>
       </ul>
     </div>
<div id="content">Contenido interesante y original que te hará ganar posicionamiento en google.</div>

<div id="footer">Y aquí ese pie que no se nos queda abajo.</div>

Bueno, pues lo primero es el marcado (luego ya nos ponemos con el CSS). La idea es, como he dicho, encerrar todo el contenido en un div que será un contenedor general, y por si acaso al final de este metemos un div vacío con la misión de evitar problemas si hay elementos flotados encima.

<div id="container"> <!--El container-->
  <div id="header">Aquí la cabecera</div>
    <div id="nav">
       <ul>
          <li><a href="#">Inicio</a></li>
          <li><a href="#">Primera</a></li>
          <li><a href="#">Segunda</a></li>
       </ul>
     </div>
  <div id="content">Contenido interesante y original que te hará ganar posicionamiento en google.</div>
  <div class="clear"></div><!--El citado div para evitar problemas con "flotaciones"-->
</div><!--cerramos el container-->
<div id="footer">Y aquí ese pie que no se nos queda abajo.</div>

Bueno, eso está listo. Ahora toca ceeseesear (CSS) todo. Como ya he dicho, la idea es dar a todo el contenedor un tamaño mínimo del 100% de la altura, meterle un margen negativo por abajo y allí insertar el pie. Vamos a meter un pie de 50px de alto en el ejemplo.

/*Lo primero, todo el cuerpo que ocupe el 100%*/
html, body {    
   height: 100%; 
}

/*Lo segundo, el container, con algura mínima del 100% y un margen inferior negativo igual al alto que queramos darle al pie*/
#container {
   min-height: 100%;
   margin-bottom: -50px;
   position: relative;
}

/*Lo tercero, el pie con la altura deseada (igual al margen negativo de antes)*/
#footer {
   height: 50px;
   position: relative;
}

/*Y terminamos con el clear, que ha de ser tan alto como el pie y "limpiar" todos los floats*/
.clear{
   height: 50px;
   clear: both;
}

Y con esto ya está, en todos los navegadores superiores a IE6 (y como IE6 está descontinuado por Microsoft ni me voy a molestar en buscar solución, aunque creo que basta con cambiar el min-height del container por height).

Artículo dedicado con cariño a Gaius Baltar, que se lo había prometido en el feisbuck… jojojo