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

Question

Hi,

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.

Answer 1

You could always do:

var t=0;
var t_elem;
$("*",elem).each(function () {
    if ( $(this).outerHeight() > t ) {
        t_elem=this;
        t=t_elem.outerHeight();
    }
});

Edited to include suggestion.

Answer 2

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>

The containing div should then have the correct size and you can get it by just doing:

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