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

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


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);


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.


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();