lviggiani lviggiani - 6 months ago 15
HTML Question

Get actual size of DIV including overflow (elements exceeding parent bound)

Consider this example:



var elem = document.getElementById("elem");

alert(elem.offsetHeight + " " + elem.getBoundingClientRect().height);

<div id="elem" style="position:relative; width: 100px; height: 100px; border: 1px solid black; box-sizing: border-box">
<div style="position: absolute; bottom: -15px;">Test</div>
</div>





As you see my div actual height is 100px (as in its style) plus the exceeding part of its child (overflow). However both
offsetHeight
and
getBoundingClientRect().height
will return 100px, thus not taking into account the overflow part. I would expect something around 115px.

So, how can I get the actual size of an arbitrary DIV taking into account all its children? Possibly please without jQuery.

EDIT: Regarding possible duplicate CSS / JavaScript - How do you get the rendered height of an element?, it's not what I was looking for.

Answer

elem.scrollHeight

https://jsfiddle.net/LLfeh8nk/

alert(elem.scrollHeight + " " + elem.getBoundingClientRect().height);