lviggiani lviggiani - 2 years ago 97
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>

As you see my div actual height is 100px (as in its style) plus the exceeding part of its child (overflow). However both
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 Source


alert(elem.scrollHeight + " " + elem.getBoundingClientRect().height);
Recommended from our users: Dynamic Network Monitoring from WhatsUp Gold from IPSwitch. Free Download