jQuery used height of Div element

Question

Hi, I try to get the exact used Height of a div element. It should be .outerHeight() but this does not work if the last child of the div has a border bottom. I did a little example:

Html:

<div id="iWantThisHeight" class="box">
<div id="div1" style="">innerDiv1</div>
<div id="div2" style="">innerDiv2</div>
</div>

Css:

.box div{
    height:100px;
    margin-bottom:20px;
}

Code example: http://jsfiddle.net/T3b6r/4/ The used height schould be 240px (2x100px for height + 2x20px margin) but the last margin-bottom is ignored. (Margin-top is ignored completly by the way)

Did i oversee something or do i have to check each element for their margins, to get the space used by the div?

Answer 1

Are you using .outerHeight(true) ? Without the boolean true, margins will not be included.

Answer 2

If you wrap the container div in a border it returns the height as desired. Just use the same color border as the backdrop it will be against.

See http://jsfiddle.net/T3b6r/7/