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!

super_looper

Escribir comentario

Haz clic aquí para dejar tu comentario