1

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.

Community
  • 1
  • 1
lviggiani
  • 5,824
  • 12
  • 56
  • 89
  • 1
    It *is* the actual size, because `position:absolute` takes the element out of the flow and it doesn't affect its parent size. – pawel Jun 17 '15 at 07:53
  • 1
    `elem.scrollHeight` doesn't count borders by the way – Joel Almeida Jun 17 '15 at 07:54
  • Well it got set to box-sizing: border-box, change it to padding-box if you want the borders. – Lain Jun 17 '15 at 07:54
  • @Lain: thanks! Please turn it as an answer so I can vote it – lviggiani Jun 17 '15 at 07:55
  • possible duplicate of [CSS / JavaScript - How do you get the rendered height of an element?](http://stackoverflow.com/questions/526347/css-javascript-how-do-you-get-the-rendered-height-of-an-element) – Joel Almeida Jun 17 '15 at 07:56

1 Answers1

3

elem.scrollHeight

https://jsfiddle.net/LLfeh8nk/

alert(elem.scrollHeight + " " + elem.getBoundingClientRect().height);
Lain
  • 3,657
  • 1
  • 20
  • 27