CSS Problemas Técnicos Programación Tips

Trucos CSS: Fijar la misma altura en varios Divs

Maxim Popov, freepik.es

¿Cómo lograr que varios elementos con contenido diferente tengan la misma altura?

Este miniproblema de estilo puede hacernos perder la paciencia, junto a muchas horas de productividad. Y es que las posibles soluciones, aunque sencillas, no son muy intuitivas.

Imaginemos que tenemos la siguiente situación:

Una serie de Divs, más o menos con el mismo contenido, pero en el que uno de ellos no termina de alinear su altura con la de los demás.

Hemos probado a poner exactamente las mismas líneas de contenido, la misma altura de las imágenes, e incluso comandos CSS como max-height o min-height, pero lo que funciona en una resolución, al hacer la pantalla más pequeña, se descuadra en otra. ¡¿Qué hacer?!

 

 

Solución 1: Display Flex

Imaginemos que tenemos el siguiente código:

 

La solución es tan sencilla como añadir display:flex al div contenedor:

 

De esa manera, no importa lo alto que sea un Div, el resto se adaptarán siempre a la altura del mayor:

 

Si queremos hacer lo mismo con la anchura, habrá que utilizar  flex: 1; en los Divs interiores:

Solución 2: Overflow Hidden

No es tan elegante como la anterior, pero si de ocultar lo poquito que sobra se trata, esta nos puede valer.

Ahora no igualamos la altura, ocultamos lo que sobrepasa en altura a los demás elementos:

 

Solución 3: Comportamiento de tabla

CSS permite que los Divs antúen como las antiguas tablas de HTML. ¿Cómo?

display: table-row; para el contenedor, y display: table-cell; para los divs contenidos.

 

 

Hay muchas otras soluciones como usar jquery para que iguale la altura de manera dinámica, o posicionarlo todo con position:relative o absolute, pero las soluciones más sencillas y socorridas son las arriba nombradas.

¿Crees que deberíamos incluir otra solución importante? Cuéntanoslo en los comentarios!

 

Si te ha resultado útil esta entrada, ¡no olvides compartirla!

Cristian Sarabia Martínez

Desde que a principios de los 90 mi padre desempolvó su Spectrum, no he dejado de probar y experimentar con la tecnología.

Enamorado del mundo web, Full Stack Developer de profesión y diseñador por devoción.

Ahora hago mis pinitos en esto del blogging para compartir con vosotros un poquito de todo lo que la comunidad me ha dado.

Escribir comentario

Haz clic aquí para dejar tu comentario