Find Out Divs Height And Setting Div Height

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 co

Solution 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!

Solution 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.

Solution 3:

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

see this example

Solution 4:

This is straight out of the jQuery documentation pages:

$.fn.equalizeHeights = function(){
  returnthis.height( Math.max.apply(this, $(this).map(function(i,e){ return $(e).height() }).get() ) )
}
$('input').click(function(){
  $('div').equalizeHeights();
});

Solution 5:

I believe you are looking for this plugin: equalizeBottoms by Ben Alman