Question

I have an issue with two adjacent div “columns”. It is a common use case that one of them might be gargantually taller than the other one, and this can be a usability issue, since users drag’n’drop items from one div to the other.

Using jQuery, I’d like to make sure that these two columns are always equal height. Not just on page load, but also if their inner content ever changes, or they’re animated with jQuery or the page is resized or any other possible reason the height of taller div changes, the other one will follow.

What would be the fastest processing way of achieving this? (I’d like minimal lag on redraws on window resizing)

Thanks a lot in advance!

Answer 1

<div class="same_height_kids"><div>foo></div><div>bar</div></div>

$('.same_height_kids').bind('DOMSubtreeModified change', function(e){
  var min = 0;
  $(e.currentTarget).children().each(function(i, e){
    $(e).css({minHeight: 0});
    if($(e).height() > min){
      min = $(e).height();
    }
  });
  $(e.currentTarget).css({minHeight: min});
  $(e.currentTarget).children().each(function(i, e){
    $(e).css({minHeight: min});  
  });
});

this is not tested code. the DOMSubtreeModified event is not supported be IE older then 9 nor by opera. as much as i know the onChange event works instead in some browsers. onResize usually only on windows and frames.

this implementation has the flaw that the divs can’t get smaller. for that you have to remove the min-height before calculating the new height.

EDIT: updated code. example on http://jsfiddle.net/ADY3F/5/