KutePHP KutePHP - 4 months ago 10
Javascript Question

Calculate height of div's children using jQuery

I want to match parent's height with the total height of its' children, so the content does not flow out from parent's border. I'm using the following code :

$("#leftcolumn").each(function(){
totalHeight=totalHeight+$(this).height();
});


Will it iterate through all the div's children? Sometimes, it works sometimes it doesn't.

Also, I tried following code, assuming it will consider all its children. But the result is strange and gives doubled height from the correct result.

$("#leftcolumn > *").each(function(){
totalHeight=totalHeight+$(this).height();
});


Thanks in advance.

Answer

Try it like so:

var totalHeight = 0;

$("#leftcolumn").children().each(function(){
    totalHeight = totalHeight + $(this).outerHeight(true);
});

http://api.jquery.com/outerHeight/ takes margins, paddings and borders into the calculation which should return a more reliable result.