Altura 100% de un DIV

Setear un div al 100% de altura, o bien que siempre se estire según el contenido del div de al lado, es algo que sólo se puede cumplir en CSS mediante trucos. El viejo template de WordPress (creo que el que estaba en el 2.0), usaba una imagen para simular el alto 100%, seteando a la misma como fondo del div contenedor de los otros dos. El color de ambos divs estaba creado entonces por una imagen.

El truco que uso cuando me piden este tipo de funcionalidades, es el siguiente:


.contenedor{
 overflow:hidden;
 width:680px;
 margin:0 auto;
 }
 .left{
 float:left;
 width:100px;
 padding:20px;
 padding-bottom:9999em;
 margin-bottom:-9999em;
 background:#555555;
 }
 .main{
 float:left;
 width:500px;
 padding:20px;
 background:#bbbbbb;
 }

Mi .contenedor, sin height seteado, con overflow:hidden. Esto es importante porque en el .left seteamos un padding-bottom monstruoso, extremadamente grande, junto con un margin-bottom negativo igual de grande, que lo único que harán será estirar el contenido de ese div hasta el final de .contenedor, pero como el mismo tiene la instrucción de «ocultar» todo lo que sobresalga de él, nunca vemos el excedente.

Mejor es ver el html, no?

turu

Tech Lead at Rooot Group

Latest posts by turu (see all)