En alguna ocasión, todo el mundo nos hemos encontrado con un diseño de una página web, en la cual hay diversas columnas y todas deben tener el mismo alto, sin importar el contenido.
Como cualquier problema, se puede solucionar de diversas formas.
Falsas columnas
Mediante este método, usaremos una imagen de fondo que delimite las columnas. Para esto, en el elemento que contenga todas las columnas pondremos una imagen que se repetirá verticalmente. Dado que el contenedor se ajustara a la columna más alta, la imagen se vera aunque el resto de columnas acaben antes.
Jugando con los margenes en CSS
Esta opción es la que más me gusta, ya que nos permite solucionar este problema sin necesidad de utilizar JavaScript o necesitar una imagen.
Se trata de alargar todas las columnas hacia abajo con un valor de padding-bottom y a la vez ocultar la zona que hemos alargado con un margin-bottom negativo. El código CSS necesario seria el siguiente:
1 2 3 4 5 6 7 8 9 10 |
.contenedor{ overflow: hidden; } .columna{ float: left; width: 33%; padding-bottom: 1000px; margin-bottom: -1000px; } |
El código HTML debería ser similar a este:
1 2 3 4 5 6 7 8 9 10 11 |
<div class="contenedor"> <div class="columna" style="background: red"> Columna 1 </div> <div class="columna" style="background: blue"> Columna 2 </div> <div class="columna" style="background: green"> Esta<br />columna<br />es<br />la<br />más<br />larga </div> </div> |
Lo que nos daría este resultado:
Mediante JavaScript
En este caso utilizaremos JavaScript para que una vez que la página esté cargada, obtener los altos de las columnas, quedándonos con el mayor, y posteriormente fijando el resto a ese valor.
No es una solución que me guste especialmente. Usando JavaScript puede que la solución no sea válida a todos los usuarios (aunque pocos, algún usuario podría no tener JavaScript habilitado), por lo que prefiero usar cualquiera de las otras dos soluciones propuestas, en las que mediante CSS llegamos al mismo resultado.
Me ha ayudado mucho.
Gracias
Un saludo
Me alegro que te haya resultado de ayuda.
Un saludo!
Excelente info, me vino de 10! muchas gracias
Me alegro que te haya resultado útil.
Un saludo!