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

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.



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

Edited to make it work again.


I found this snippet which seems more straight forward and shorter at

var maxHeight = 0;

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


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">
    <img src="test1.png" alt="test1" style="float: left" />
    <img src="test2.png" alt="test2" style="float: left" />
    <div style="clear: both;"></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:


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;
       if ($(this).height() > maxHeight) { maxHeight = $(this).height(); }

$(window).resize(function () {
$(document).ready(function(e) {

I hope this will help someone !

Happy coding guys ! :)


Recent Questions

Top Questions

Home Tags Terms of Service Privacy Policy DMCA Contact Us

©2020 All rights reserved.