Layout al 100% de alto

Después de haber navegado mucho buscando la versión perfecta – que pienso que no existe – yo hago mi pequeña y humilde propuesta. Yo desde luego que le voy a sacar mucho provecho. Si desde luego a alguien más le sirve y le evita tener que darle a la cabeza, otra alegría que me llevo.

La idea se basa en una estrucura similar a esta

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Layout al 100% de alto</title>
<link type="text/css" href="layout.css" rel="stylesheet" />
</head>
<body>
<div id="layout">
   <div id="cabecera">capa cabecera</div>
   <div id="lateral">capa lateral</div>
   <div id="contenido">capa contenido</div>
   <div id="pie">capa pie</div>
</div>
</body>
</html>

Y la hoja de estilos pretende ser algo como esto, y después intento explicar el porqué y como.

html,body {
   height:100%;
/* necesario para las sub-alturas */
}

body {
   margin:0;
   padding:0;
   overflow-x: hidden;
/* Para evitar el feo scroll horizontal de explorer 7 */
   background:#fff;
}

body, div, p {
   font-family: verdana;
   font-size:12px;
   color:#000;
}

div#layout {
   position:relative;
/* necesario para el posicionamiento */
   margin:0 auto;
/* lo centramos, aunque no funciona para explorer 5 */
   width:750px;
   height:auto !important;
/* para los navegadores de verdad */
   height:100%;
/* Para que explorer lo interprete como alto mínimo */
   min-height:100%;
/* para los navegadores de verdad */
   background:#f0f0f0;
}

div#cabecera {
   background:#cc0000;
   height: 80px;
   padding:10px;
   color: #fff;
}

div#lateral {
   float: left;
   width: 150px;
   padding: 10px;
   padding-bottom: 50px;
/* Este padding debe ser igual a la altura del footer */
   background: #ccc;
}

div#contenido {
   padding: 10px;
   padding-bottom: 50px;
/* Este padding debe ser igual a la altura del footer */
   margin-left: 170px;
/* 150px del ancho del lateral
    más 20px del padding del mismo */
   background: #eeeAA0;
}

div#pie {
   position:absolute;
   width:730px;
/* 750px del ancho del layout menos 20px del padding */
   height: 30px;
   padding:10px;
   color: #fff;
   bottom:0;
/* lo encajamos al fondo de todo */
   background:#006699;
}

Lo primero de todo es permitir alcanzar un 100% de altura a la entidad más importante de la estructura, y en este caso me refiero a las etiquetas <html> y <body>, por lo que les damos una altura del 100%.

Acto seguido a la capa “layout” que es la que va a contener el resto de elementos, la posicionamos de forma relativa. Esto nos permite posicionar otros elementos con respecto al contenedor principal, es decir, a la capa “layout“. Después le aplicamos el famoso truco dándole un mínimo de altura del 100%, altura automática declarándola como !important, y para hacerlo compatible con los navegadores de mentira, volvemos a declarar la altura al 100%. Esto evidentemente no anula la altura anterior para los navegadores buenos, ya que hemos puesto el !important.

La cabecera y las columnas contenido y lateral, no tienen nada fuera del otro mundo, a no ser un “padding-bottom” que es igual a la altura de nuestro footer. Esto se debe a que el footer lo posicionamos de forma absoluta, a 0px del fondo (bottom:0px;) por lo que siempre estará pegado al fondo y puede llegar a tapar con su altura parte del texto de las capas citadas.

Espero haberme explicado del porqué de determinados estilos, aunque como dice un conocido

No me enteré de lo que dijo, pero si funciona me vale

Pués eso. Solo apuntar para terminar, que las capas lateral y contenido no se estiran con el resto del layout – eso sería otra historia. Lo que pretendía con este tutorial era que el footer se mantenga siempre abajo de todo e independiente del tamaño de la ventana y del contenido del mismo, que se mantuviera igual.

Alguien me preguntaba por la mañana si esto sirve para el caso en que el lateral necesite tener un color de fondo que alcance hasta el footer. Mi respuesta es si. Simplemente crearíamos un fondo del ancho deseado, y lo colocaríamos de fondo en la capa layout repitiéndose verticalmente.

[ demo ] [ descargar ]