Tutorial: Columnas de la misma altura con jQuery

Un problema común cuando estamos diseñando una web con varias columnas con float es que la altura de las mismas depende del contenido que tengan y si les aplicamos bordes o fondos, da la impresión de que parte de la estructura se corta. Había visto varias soluciones, como usar un fondo en el contenedor de las columnas, simulando la estructura de las mismas, para dar la impresión de que no se cortan, pero no es una solución práctica.

La otra solución pasaba por usar Javascript y después de varias soluciones, he decidido crear la mía usando todo el poder de jQuery, y mas sencillo no puede ser.Lo mas fácil será pegar el código Javascript y explicarlo.

$.fn.equalCols = function(){

var tallestHeight = 0;

$(this).each(function(){

var thisHeight = $(this).height();

if (thisHeight > tallestHeight){

tallestHeight = thisHeight;

}

});

$(this).height(tallestHeight);

}

Primero creamos una nueva función jQuery (equalCols) para poder ejecutar el código fácilmente. Lo que hace la función es comprobar si la altura de cada elemento seleccionado es la mas alta de todas y asignársela a todos los elementos. Para ello, vamos comprobando si la altura de cada elemento (thisHeight) es mas alta que la última mayor altura guardada (tallestHeight) y la vamos actualizando.

El resultado es que al final la mayor altura se almacena en tallestHeight y se asigna a todos los elementos. ¿Como usamos la función? Muy sencillo:

$(‘.column’).equalCols(); //Si todos los elementos tienen la misma clase

$(‘.content, .sideBar’).equalCols(); //Si tienen clases distintas

Y como veis, es así de sencillo, simplemente lo ejecutamos sobre los elementos que queremos igualar y jQuery hace su trabajo.

Espero haber ayudado y si tenéis alguna duda, dejad comentarios y descargad el código donde está todo bien comentado y un ejemplo.

Links: Ejemplo | Descargar código