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:

El código HTML debería ser similar a este:

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.