Columnas de altura 100% con CSS

Cómo maquetar una página con CSS y conseguir que la altura de las columnas ocupe todo el espacio disponible de la página.

05/9/08 - Con CSS podemos hacer muchas cosas de una manera rápida y sencilla. Pero muchas veces tenemos que emplear técnicas, algunas sencillas y otras no tanto, para conseguir efectos que de otra manera son imposibles. Es el caso que nos ocupa en este artículo, conseguir que las columnas en una maquetación CSS ocupen el 100% de la altura disponible. Es decir, tener una página maquetada a varias columnas, donde todas las columnas llegan hasta la parte de abajo de la página.

Quizás hayas llegado a este artículo porque no consigas un height: 100% en una columna al diseñar tu página con CSS y no necesites más explicaciones de lo que pretendemos conseguir. Pero si no es el caso y deseas ver un ejemplo de cómo se haría una maquetación CSS a dos columnas accede al artículo de DesarrolloWeb.com Maquetación CSS a dos columnas. Luego echa un vistazo a la página del ejemplo que se desarrolla en el artículo anterior.

Verás que la columna que tiene una especie de barra de navegación lateral sólo ocupa un área limitada del espacio que hay en vertical. Esto es porque en CSS las capas DIV crecen verticalmente justo lo necesario, atendiendo a los contenidos que se tienen que colocar dentro. Por mucho que intentemos colocar un estilo CSS height:100% a la capa de la columna pequeña, en principio, no conseguiremos que ocupe el mismo espacio que la columna grande. Pero claro, hay una solución a todo esto y podemos estar tranquilos porque es muy simple.

Antes de continuar, puedes ver el ejemplo de maquetación CSS que vamos a explicar en este artículo.

El pequeño truco de maquetación consiste en simular las columnas con un fondo. En realidad vamos a tener columnas normales, con capas DIV transparentes, pero las vamos a situar sobre un fondo de color que será el que ofrezca el acabado en columna.

El fondo para simular las columnas

El fondo lo crearemos con el espacio que nosotros deseemos, es decir, definiremos en el fondo la distribución en columnas que necesitemos para nuestro proyecto. Haremos un fondo como este:

Como se puede ver en la imagen, tenemos un listón que tiene varias columnas, al repetirse en la vertical hará una columna tan alta como los contenidos de la página requieran.

Para poner la imagen de fondo, en el body o en el contenedor donde queramos simular las columnas, haremos un CSS como este:

background: #f0f0f0 url(fondo.gif) repeat-y 50%;

El atributo css tiene un valor position, que en este caso es 50%, con lo que conseguimos que el fondo se centre en la página.

Creamos las columnas con capas flotando a izquerda y derecha

Luego ya sólo sería crear un contenedor que aparezca en el centro de la página y un par de columnas izquierda y derecha, donde estén flotando cada una hacia su lado. En otros artículos de desarrollo web .com hemos visto cómo hacer estas cosas con CSS.

El códido HTML quedaría así:

<div id="container">
   <div id="izquierda">
      Columna de la izquierda
   </div>
   <div id="derecha">
      Esta columna de la derecha
   </div>
</div>

El código CSS del ejemplo sería como este:

body {
   background: #f0f0f0 url(fondo.gif) repeat-y 50%;
   text-align: center;
}
#container{
   margin:auto;
   text-align:left;
   width: 1000px;
}
#izquierda{
   width: 670px;
   float: left;
   margin: 10px 0px 10px 10px;
}
#derecha{
   width: 290px;
   float: right;
   margin: 10px 5px 10px 0px;
}

No tiene mucho misterio, si es que ya hemos seguido otros talleres publicados en desarrolloweb .com sobre la cómo maquetar webs con CSS. Os aconsejamos seguir la línea de artículos que comienza por el artículo Maquetación CSS.

Finalmente, os pasamos el enlace para ver el ejemplo en funcionamiento.

+ 1 manual relacionado
+ 1 categoria relacionada
+ 2 comentarios (Añadir)

Autoría, licencia y acciones sobre este artículo

Informe de Miguel Angel Alvarez* Director de DesarrolloWeb.com URL: http://www.desarrolloweb.com Atención: Contenido exclusivo de DesarrolloWeb.com. No reproducir. Copyright. * Para consultas técnicas utilizar la lista de correo. Versión imprimible del artículo Enviar artículo por e-mail Publicar un comentario del artículo

+ Entrar en CSS

Añadir un comentario del artículo Los comentarios de los visitantes son para ampliar la información del artículo. Cualquiera puede participar.

Se muestran 2 comentarios revisados

Añadir un comentario del artículo

Enlaces:

Maestrosdelweb

  Ir arriba