Tutorial: Columnas de la misma altura con jQuery

19 Feb

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

5 comentarios to “Tutorial: Columnas de la misma altura con jQuery”

  1. lordcaos 25 noviembre 2011 a 23:20 #

    Hola, me sirvió tu solución, no me había convencido mucho las de las columnas falsas o la de propiedad display de CSS, esta me funciono perfecto, gracias.

  2. fliberty 22 febrero 2012 a 03:05 #

    Al parecer hay un límite en el alto, si te dijas en mi web, verás que a veces el footer se monta sobre los artículos, debido a que el delimitador se corta a cierta altura y el contenido sale fuera.

Trackbacks/Pingbacks

  1. Columnas de la misma altura con jQuery - 19 febrero 2010

    […] Columnas de la misma altura con jQuery innominepixel.wordpress.com/2010/02/19/columnas-de-la-misma-…  por ozzysong hace 3 segundos […]

  2. Bitacoras.com - 19 febrero 2010

    Información Bitacoras.com…

    Valora en Bitacoras.com: 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 estructur…..

  3. Trackback - 24 febrero 2010

    Comentario…

    [..]Articulo Indexado Correctamente[..]…

Responder

Introduce tus datos o haz clic en un icono para iniciar sesión:

Logo de WordPress.com

Estás comentando usando tu cuenta de WordPress.com. Cerrar sesión / Cambiar )

Imagen de Twitter

Estás comentando usando tu cuenta de Twitter. Cerrar sesión / Cambiar )

Foto de Facebook

Estás comentando usando tu cuenta de Facebook. Cerrar sesión / Cambiar )

Google+ photo

Estás comentando usando tu cuenta de Google+. Cerrar sesión / Cambiar )

Conectando a %s

A %d blogueros les gusta esto: