Recursos y Descargas

Esto no es un blog. Es una sección que programé para ir publicando aquellas cositas que me parecen interesantes y, por cualquier motivo, quiero tener a mano. Copia lo que quieras, usa lo que quieras (pero respeta sus licencias).

Igualar columnas css con jQuery

Escrito por: Martín el 31-12-2008 08:19:48

Igualar columnas css con jQuery

Cuando maquetábamos webs con tablas (sí... soy culpable, yo también usé tablas), era muy fácil igualar el alto de columnas (no en contenido, sino en altura total de la caja).

Ahora, con los CSS, se hace un poco más complicado, porque claro, intentaremos dejar eso de las tablas para eso de los datos tabulares, por lo que no podremos valernos de esa ayudita...

Entonces, y aunque una solución -casera- puede ser usar un div contenedor y dentro cada div de las columnas, jQuery no deja de sorprendernos con otra maravillosa solución (esta solución no vale para divs con fondos)

Consiste en decirle mediante un class, que columnas debe igualar y el script se ocupa de hacerlo.

Obviamente, necesitaremos incluir la librería jQuery, pero a esta altura, creo yo, ya la habremos usado para algo en nuestra web.

La aplicación de esta solución es muy fácil, solo hace falta aplicar la función (ver código 1) y luego, marcar cada div con un class (ver código 2).

Fuente: cssnewbie (inglés).

Código JAVASCRIPT

function equalHeight(group) {
tallest = 0;
group.each(function() {
thisHeight = $(this).height();
if(thisHeight > tallest) {
tallest = thisHeight;
}
});
group.height(tallest);
}
$(document).ready(function() {
equalHeight($(".column"));
})

Código CSS