Find out divs height and setting div height

Question

I'm quite new to javascript/jquery stuff, but i would like to do this kind of thing with it:

I have four divs side-by-side like this and content in each one. Now if one has more content it gets stretched higher. I would like to make the other divs as high too even if they don't have as much content. So basically i want the script goes through the divs and check the heights and sets all of divs heights to same as the highest div has. Hopefully you understand :)

Answer 1

I was getting a NaN error with SLaks code. Giving maxHeight an initial value of 0 did the trick.

var maxHeight = 0;
$('div')
  .each(function() { maxHeight = Math.max(maxHeight, $(this).height()); })
  .height(maxHeight);

Thanks SLaks!

Answer 2

You can use jQuery's height method to get and set the height of an element.

You need to loop through the elements, find the tallest one, then set the height of all of the elements.

var maxHeight;
$('div')
    .each(function() { maxHeight = Math.max(maxHeight, $(this).height()); })
    .height(maxHeigt);

Replace 'div' with a jQuery selector that selects the elements you want to equalize.