How to get height of the highest children element in javascript/jQuery?

Question

I need a function to get the height of the highest element inside a div.

I have an element with many others inside (dynamically generated), and when I ask for the height of the container element using $(elem).height(), I get a smaller height than some of the contents inside it. Some of the elements inside are images that are bigger than the size this element says to have.

I need to know the highest element so I can get it's height.

Solution 1

You could always do:

var t=0; // the height of the highest element (after the function runs)
var t_elem;  // the highest element (after the function runs)
$("*",elem).each(function () {
    $this = $(this);
    if ( $this.outerHeight() > t ) {
        t_elem=this;
        t=$this.outerHeight();
    }
});

Edited to make it work again.

Solution 2

I found this snippet which seems more straight forward and shorter at http://css-tricks.com/snippets/jquery/equalize-heights-of-divs

var maxHeight = 0;

$(yourelemselector).each(function(){
   var thisH = $(this).height();
   if (thisH > maxHeight) { maxHeight = thisH; }
});

$(yourelemselector).height(maxHeight);

Solution 3

If the div element is smaller than it's children, the children are probably floating. Can you allow the div to be as large as children?

If you can, add a clearing element at the bottom to make the div wrap it's children:

<div id="someParent">
    <p>test</p>
    <img src="test1.png" alt="test1" style="float: left" />
    <img src="test2.png" alt="test2" style="float: left" />
    <div style="clear: both;"></div>
</div>

Or apply a clearfix CSS solution to do pretty much the same thing but without extra markup or a clearing div.

The containing div will then get the same height as the highest child element, and you can get it by:

$("#someParent").height();

Solution 4

In my case I had to use it with a responsive design so I made it work with window resize.

function fixHeight(elem){
    var maxHeight = 0;
    $(elem).css('height','auto');
    $(elem).each(function(){
       if ($(this).height() > maxHeight) { maxHeight = $(this).height(); }
    });
    $(elem).height(maxHeight);
}

$(window).resize(function () {
    fixHeight('.myelement');
});
$(document).ready(function(e) {
    fixHeight('.myelement');
});

I hope this will help someone !

Happy coding guys ! :)

View more solutions