Question

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

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/