Columnas de altura 100% con CSS

por | 18 septiembre 2008
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. 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. Fuente: DesarrolloWeb
Compartir... Email this to someoneShare on LinkedIn0Pin on Pinterest0Share on StumbleUpon0Share on Tumblr0Tweet about this on Twitter