27

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.

Leandro Ardissone
  • 3,009
  • 6
  • 32
  • 31

4 Answers4

46

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);
Roko C. Buljan
  • 196,159
  • 39
  • 305
  • 313
gebeer
  • 703
  • 6
  • 8
33

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.

Thomas
  • 4,889
  • 4
  • 24
  • 19
  • 2
    You may want to use outerHeight() instead of height(). – John Fisher Jul 02 '09 at 19:32
  • elem is not defined t_elem.outerHeight() is not a function Did you test this? – David Ryder Jun 18 '11 at 10:13
  • @David Ryder: `elem` is not defined because it is the element that you are testing. Instead of elem, you put in the name of the actual var that holds the element you want to test. As for `outerHeight()` most likely something has changed since I answered this. I will edit the answer to make it work. – Thomas Jun 19 '11 at 13:33
  • @Thomas thanks man, was looking for that also. Old but gold answer. As suggestion, you could add some comment after the `t=$this.outerHeight();` so newbies could understand that `t` is the final value and he can use to whatever it wants with the value (such as `something.height(t+'px')` or `something.animate( etc );` – RaphaelDDL Dec 30 '11 at 16:31
  • I still don't get the elem thing, I tried > $("*","#headline").each(function () { but that doesn't work, a more concrete example would be nice – clankill3r Jan 15 '12 at 20:42
  • @clankill3r: Your problem is that you are using a string for the element. The element has to be the DOM element itself. In your case it would be easiest to do `$("*", document.getElementById("headline"))`. – Thomas Mar 29 '12 at 12:44
6

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();
Community
  • 1
  • 1
oldwizard
  • 5,012
  • 2
  • 31
  • 32
  • what if there will be 3 elements with width: 50% for example, then parent height will be first and thrid element height sum. So your anwser is incorrect – Szymon May 11 '15 at 20:26
  • How would `$("#someParent").height()` give the sum of the height of two out of the three children? It would always give the height of the child with the largest height in this example due to the clearing element. What would the width of the children have to do with it? Try it in a browser. This answer was given 6 years ago, much has happened since then. flexbox is a much easier way to go if you can drop support for – oldwizard May 12 '15 at 05:42
  • dude think it once again 3 elements 50% then height parent is sum first and third elements(if float left), well thats pretty simple.. – Szymon May 12 '15 at 11:10
6

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 ! :)

Cstyves
  • 400
  • 3
  • 5