CSS: Height de un div que ocupa el máximo del div padre


Buenas a todos,

Llevaba ya tiempo sin escribir nada sobre CSS, será porque no me ha tocado maquetar, hasta hace unos días. Hoy quiero contar como hacer que un div hijo ocupe el 100% del height del div padre independientemente del tamaño que tenga éste. Esto lo podemos utilizar por ejemplo en un sidebar dentro de una página web donde el height del padre irá cambiando en función del contenido de éste.

Vamos a ver el código de cómo podríamos hacerlo y después veremos el resultado con algunos ejemplos.

.parent{
   width:100%;
   min-height:20em;
   float:left;
   position:relative;
   overflow:hidden:
}

.child{
   width:30%;
   position:absolute;
   top:0;
   bottom:0;
}

Aquí hay dos claves para entender como funciona. Por un lado, el uso, como ya mostré en un post anterior de la propiedad position. Y por otro lado e igual de importante, el uso de las propiedades en el hijo top y bottom, con el valor 0. Esto hará que el hijo se ajuste en todo momento tanto al top como al bottom del padre, consiguiendo el efecto deseado. Vamos a ver el funcionamiento del ejemplo.

prueba
prueba

Como se puede ver, independientemente del height del padre, el hijo ocupa siempre el 100% de éste.

Os dejo un par de enlaces de interés, una la explicación del uso de la propiedad position en CSS y el blog donde pude investigar cómo hacer lo que os he contado.

Uso de la propiedad position en CSS

http://blog.iguazoft.com/divs-con-alto-al-100-sin-asignarle-100-al-elemento-padre/

Anuncios

2 comentarios en “CSS: Height de un div que ocupa el máximo del div padre

  1. Me surge un problema con tu solución. Al reducir el tamaño de la ventana (adaptarlo al que sería el tamaño de la pantalla de un smartphone, por ejemplo) el sidebar se superpone a al div del contenido principal, tapándolo por completo. ¿Alguna idea de por qué puede ser y cómo solucionarlo? Mil gracias por tu ayuda otra vez.

Responder

Introduce tus datos o haz clic en un icono para iniciar sesión:

Logo de WordPress.com

Estás comentando usando tu cuenta de WordPress.com. Cerrar sesión / Cambiar )

Imagen de Twitter

Estás comentando usando tu cuenta de Twitter. Cerrar sesión / Cambiar )

Foto de Facebook

Estás comentando usando tu cuenta de Facebook. Cerrar sesión / Cambiar )

Google+ photo

Estás comentando usando tu cuenta de Google+. Cerrar sesión / Cambiar )

Conectando a %s