¿Cómo puedo mantener múltiples DIV de la misma altura usando jQuery?

Tengo algunas tags DIV con diferentes cantidades de contenido de texto.

HTML:

...

...

...

...

Están en un diseño de dos por dos y su ancho es fluido:

CSS:

 div#boxes { width: 100%; } div#boxes div { width: 49.9%; float: left; } 

Los quiero a todos de la misma altura.

Entonces, los recorro y encuentro la altura del más alto. Luego vuelvo a bucle y los configuro a esa altura.

jQuery:

 $(function() { var maxHeight = 0; $('div#boxes div').each(function(){ if (maxHeight < $(this).height()) {maxHeight = $(this).height()} }); $('div#boxes div').each(function(){ $(this).height(maxHeight); }); }); 

Esto funciona bien si la altura del div no necesita cambiar nuevamente.

Pero falla si cambio el tamaño de la ventana del navegador:

  1. Si (a) amplío el navegador, entonces (b) mis DIV se hacen más amplios, entonces (c) su contenido de texto se ajusta menos veces, y luego (d) mis DIV son demasiado altos.

  2. Si yo (b) hago que el navegador sea más estrecho, entonces (b) mis DIV se vuelven más estrechos, entonces (c) su contenido de texto se ajusta más, y luego (d) mis DIV son demasiado cortos.

¿Cómo puedo (1) clasificar automáticamente los DIV a la altura de su contenido como lo normal, pero también (2) mantener esos DIV múltiples de la misma altura?

Actualice … reescribiendo por completo esta respuesta después de experimentar y encontrar otra forma aparentemente viable de hacerlo:

 function sortNumber(a,b) { return a - b; } function maxHeight() { var heights = new Array(); $('div#boxes div').each(function(){ $(this).css('height', 'auto'); heights.push($(this).height()); heights = heights.sort(sortNumber).reverse(); $(this).css('height', heights[0]); }); } $(document).ready(function() { maxHeight(); }) $(window).resize(maxHeight); 

Una cosa que noté es que IE realmente tiene problemas de redondeo con divs flotados al 50% … la renderización era mucho mejor si los cambiaba al 49%.

Este jQuery funciona …

 // global variables doAdjust = true; previousWidth = 0; // raise doAdjust flag every time the window width changes $(window).resize(function() { var currentWidth = $(window).width(); if (previousWidth != currentWidth) { doAdjust = true; } previousWidth = currentWidth; }) // every half second $(function() { setInterval('maybeAdjust()', 500); }); // check the doAdjust flag function maybeAdjust() { if (doAdjust) { adjustBoxHeights(); doAdjust = false; } } // loop through the DIVs and find the height of the tallest one // then loop again and set them all to that height function adjustBoxHeights() { var maxHeight = 0; $('div#boxes div').each(function(){ $(this).height('auto'); if (maxHeight < $(this).height()) {maxHeight = $(this).height()} }); $('div#boxes div').each(function(){ $(this).height(maxHeight); }); } 

Para los otros que, como yo, vinieron buscando una solución en Google: la primera parte de la respuesta aceptada solo funciona cuando el primer div es el más alto. Le hice algunos cambios y ahora parece funcionar en todos los casos.

 var highest = 0; function sortNumber(a,b) { return a - b; } function maxHeight() { var heights = new Array(); $('#wrapper2>div').each(function(){ $(this).css('height', 'auto'); heights.push($(this).height()); heights = heights.sort(sortNumber).reverse(); }); highest = heights[0]; $('#wrapper2>div').each(function(){ $(this).css('height', highest); }); } $(document).ready(function() { maxHeight(); }) $(window).resize(maxHeight); 

Mira este plugin jQuery que te permite monitorear una propiedad de CSS como la altura.

Si quieres que funcione al cambiar el tamaño, etc. … Hazlo así:

 function sortNumber(a,b) { return a - b; } var highest = 0; function maxHeight() { var heights = new Array(); $('.equalheight div').css('height', 'auto'); $('.equalheight div').each(function(){ heights.push($(this).height()); }); heights = heights.sort(sortNumber).reverse(); highest = heights[0]; $('.equalheight div').css('height', highest); } $(document).ready(maxHeight); $(window).resize(maxHeight); 

Encontré esta solución un poco más ordenada para mi situación. Funciona independientemente de qué div sea el más alto. Basado en este viejo post de Chris Coyier en CSS Tricks .

 function maxHeight() { var maxHeight = 0; $(".container > .post-box").each(function(){ if ($(this).height() > maxHeight) { maxHeight = $(this).height(); } }); $(".container > .post-box").height(maxHeight); } $(document).ready(function() { maxHeight(); } $(window).bind('resize', function () { $(".container > .post-box").css('height', 'auto'); maxHeight(); }).trigger('resize'); 

Sin embargo, sí tuve que establecer la altura en el ajuste de tamaño automático antes de ejecutar de nuevo la función. No necesité configurarlo en la función original porque estaba configurado en el CSS.