Columnas de altura 100% con CSS

  • Por
  • 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.
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.

Referencia: Te dejamos aquí un enlace a un artículo del taller de CSS que tiene relación con este y que tal vez te interese también leer para encontrar otros trucos relacionados con capas <div> de height: 100%.

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:


Nota: la imagen del fondo está distorsionada en tamaño, para que quepa en esta página y se pueda leer bien el artículo. Nuestro fondo original mide 1280x50 pixel y está creado con espacios optimizados para definiciones de pantalla de 1024 pixels de ancho o superior.

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.

Autor

Miguel Angel Alvarez

Miguel es fundador de DesarrolloWeb.com y la plataforma de formación online EscuelaIT. Comenzó en el mundo del desarrollo web en el año 1997, transformando su hobby en su trabajo.

Compartir

Comentarios

toni yang

18/9/2008
Siguiendo tu desarrollo, cuando se visualiza el fondo me queda una linea fina en la unión de cada fondo de 50 px, es decir como si el fondo fuese pautado. El dibujo del fondo lo he realizado con Corel Draw dibujando un rectángulo y sobreponiendo otros de la anchura de la izquierda y derecha.

Leo

20/9/2008
Es un truco sencillo para "simular" columnas, pero lamentablemente no resulta práctico cdo. las páginas requieren cierta complejidad como columnas colapsables (u ocultables). Para esto el método que continúa utilizándose son las viejas tablas HTML, pero colocándolas dentro de capas (DIVS) para seguir cierto estilo "tableless" (aunque no al 100%)

91121002227

27/5/2009
preguntar
muy chevere e interezante el ejemplo de css, pero tengo un inconveniente, es que tengo un plantilla hecha con css y javascrpt y quiero montarla en un servidor gratis cual me recomienda????????

anonimo

25/6/2009
En mozilla se visualiza mal al redimensionar la ventana
parece que tiene mas misterio del que piensas, revisa la visualización en mozilla modificando el tamaño del navegador.

alvar

13/7/2009
otra forma
truco faque... no a la simulacion...

se puede hacer con css "facil"

padding-bottom: 60000px;
margin-bottom: -60000px;
overflow: hidden;

el padding le da la altura, el margin recoje y el overflow no lo muestra. Debajo de las columnas puedes poner lo que quieras, siempre y cuando este en una capa superior a la de la columna.

espero k sirva de ayuda