0

There are similar questions but none answers helped.

I have an absolute div with some content, and I want to get the "real" height of this div (not the height of visible part). I suppose it is a sum of heights of all children of this div.

https://jsfiddle.net/h7mamr4s/ - as you can see height(), outerHeight() and innerHeight() methods return only the height of visible div. The "real" height should be greater.

Is there a way to do so with pure JavaScript or jQuery? I use jQuery 1.11.2 (no, I can't update for some reasons).

console.log("height(): " + $("#content").height());
console.log("outerHeight(): " + $("#content").outerHeight());
console.log("innerHeight(): " + $("#content").innerHeight());
#content {
  border: 1px solid #000;
  margin-top: 35px;
  position: absolute;
  top: 0;
  left: 0;
  bottom: 0;
  overflow: auto;
  width: 100%;
  z-index: 1;
}
<script src="https://code.jquery.com/jquery-1.11.2.js"></script>

<div id="content">
  <span>smth</span><br />
  <span>smth</span><br />
  <span>smth</span><br />
  <span>smth</span><br />
  <span>smth</span><br />
  <span>smth</span><br />
  <span>smth</span><br />
  <span>smth</span><br />
  <span>smth</span><br />
  <span>smth</span><br />
  <span>smth</span><br />
  <span>smth</span><br />
  <span>smth</span><br />
  <span>smth</span><br />
  <span>smth</span><br />
  <span>smth</span><br />
  <span>smth</span><br />
  <span>smth</span><br />
  <span>smth</span><br />
  <span>smth</span><br />
  <span>smth</span><br />
  <span>smth</span><br />
  <span>smth</span><br />
  <span>smth</span><br />
  <span>smth</span><br />
  <span>smth</span><br />
  <span>smth</span><br />
  <span>smth</span><br />
  <span>smth</span><br />
  <span>smth</span><br />
  <span>smth</span><br />
  <span>smth</span><br />
  <span>smth</span><br />
  <span>smth</span><br />
  <span>smth</span><br />
  <span>smth</span><br />
  <span>smth</span><br />
  <span>smth</span><br />
  <span>smth</span><br />
  <span>smth</span><br />
  <span>smth</span><br />
  <span>smth</span><br />
  <span>smth</span><br />
  <span>smth</span><br />
  <span>smth</span><br />
  <span>smth</span><br />
  <span>smth</span><br />
  <span>smth</span><br />
  <span>smth</span><br />
  <span>smth</span><br />
  <span>smth</span><br />
  <span>smth</span><br />
  <span>smth</span><br />
  <span>smth</span><br />
  <span>smth</span><br />
  <span>smth</span><br />
  <span>smth</span><br />
  <span>smth</span><br />
  <span>smth</span><br />
  <span>smth</span><br />
  <span>smth</span><br />
  <span>smth</span><br />
  <span>smth</span><br />
  <span>smth</span><br />
  <span>smth</span><br />
  <span>smth</span><br />
  <span>smth</span><br />
  <span>smth</span><br />
  <span>smth</span><br />
  <span>smth</span><br />
  <span>smth</span><br />
  <span>smth</span><br />
  <span>smth</span><br />
  <span>smth</span><br />
  <span>smth</span><br />
  <span>smth</span><br />
  <span>smth</span><br />
  <span>smth</span><br />
  <span>smth</span><br />
  <span>smth</span><br />
  <span>smth</span><br />
  <span>smth</span><br />
  <span>smth</span><br />
  <span>smth</span><br />
  <span>smth</span><br />
  <span>smth</span><br />
  <span>smth</span><br />
  <span>smth</span><br />
  <span>smth</span><br />
  <span>smth</span><br />
  <span>smth</span><br />
  <span>smth</span><br />
  <span>smth</span><br />
  <span>smth</span><br />
  <span>smth</span><br />
  <span>smth</span><br />
  <span>smth</span><br />
  <span>smth</span><br />
  <span>smth</span><br />
  <span>smth</span><br />
  <span>smth</span><br />
  <span>smth</span><br />
  <span>smth</span><br />
  <span>smth</span><br />
  <span>smth</span><br />
  <span>smth</span><br />
  <span>smth</span><br />
  <span>smth</span><br />
  <span>smth</span><br />
  <span>smth</span><br />
  <span>smth</span><br />
  <span>smth</span><br />
  <span>smth</span><br />
  <span>smth</span><br />
  <span>smth</span><br />
  <span>smth</span><br />
  <span>smth</span><br />
  <span>smth</span><br />
  <span>smth</span><br />
  <span>smth</span><br />
  <span>smth</span><br />
  <span>smth</span><br />
  <span>smth</span><br />
  <span>smth</span><br />
  <span>smth</span><br />
  <span>smth</span><br />
  <span>smth</span><br />
  <span>smth</span><br />
  <span>smth</span><br />
  <span>smth</span><br />
  <span>smth</span><br />
  <span>smth</span><br />
  <span>smth</span><br />
  <span>smth</span><br />
  <span>smth</span><br />
  <span>smth</span><br />
  <span>smth</span><br />
  <span>smth</span><br />
  <span>smth</span><br />
  <span>smth</span><br />
  <span>smth</span><br />
  <span>smth</span><br />
  <span>smth</span><br />
  <span>smth</span><br />
  <span>smth</span><br />
  <span>smth</span><br />
  <span>smth</span><br />
  <span>smth</span><br />
  <span>smth</span><br />
  <span>smth</span><br />
  <span>smth</span><br />
  <span>smth</span><br />
  <span>smth</span><br />
  <span>smth</span><br />
  <span>smth</span><br />
  <span>smth</span><br />
  <span>smth</span><br />
  <span>smth</span><br />
  <span>smth</span><br />
  <span>smth</span><br />
  <span>smth</span><br />
  <span>smth</span><br />
  <span>smth</span><br />
  <span>smth</span><br />
  <span>smth</span><br />
  <span>smth</span><br />
  <span>smth</span><br />
  <span>smth</span><br />
  <span>smth</span><br />
  <span>smth</span><br />
  <span>smth</span><br />
  <span>smth</span><br />
  <span>smth</span><br />
  <span>smth</span><br />
  <span>smth</span><br />
  <span>smth</span><br />
  <span>smth</span><br />
  <span>smth</span><br />
  <span>smth</span><br />
  <span>smth</span><br />
  <span>smth</span><br />
  <span>smth</span><br />
  <span>smth</span><br />
  <span>smth</span><br />
  <span>smth</span><br />
  <span>smth</span><br />
  <span>smth</span><br />
  <span>smth</span><br />
  <span>smth</span><br />
  <span>smth</span><br />
  <span>smth</span><br />
  <span>smth</span><br />
  <span>smth</span><br />
  <span>smth</span><br />
  <span>smth</span><br />
  <span>smth</span><br />
  <span>smth</span><br />
  <span>smth</span><br />
  <span>smth</span><br />
  <span>smth</span><br />
  <span>smth</span><br />
  <span>smth</span><br />
  <span>smth</span><br />
  <span>smth</span><br />
  <span>smth</span><br />
  <span>smth</span><br />
  <span>smth</span><br />
  <span>smth</span><br />
  <span>smth</span><br />
  <span>smth</span><br />
  <span>smth</span><br />
  <span>smth</span><br />
  <span>smth</span><br />
  <span>smth</span><br />
  <span>smth</span><br />
  <span>smth</span><br />
  <span>smth</span><br />
  <span>smth</span><br />
  <span>smth</span><br />
  <span>smth</span><br />
  <span>smth</span><br />
  <span>smth</span><br />
  <span>smth</span><br />
  <span>smth</span><br />
  <span>smth</span><br />
  <span>smth</span><br />
  <span>smth</span><br />
  <span>smth</span><br />
  <span>smth</span><br />
  <span>smth</span><br />
  <span>smth</span><br />
  <span>smth</span><br />
  <span>smth</span><br />
  <span>smth</span><br />
  <span>smth</span><br />
  <span>smth</span><br />
  <span>smth</span><br />
  <span>smth</span><br />
  <span>smth</span><br />
  <span>smth</span><br />
  <span>smth</span><br />
  <span>smth</span><br />
  <span>smth</span><br />
  <span>smth</span><br />
  <span>smth</span><br />
  <span>smth</span><br />
  <span>smth</span><br />
  <span>smth</span><br />
  <span>smth</span><br />
  <span>smth</span><br />
  <span>smth</span><br />
  <span>smth</span><br />
  <span>smth</span><br />
  <span>smth</span><br />
  <span>smth</span><br />
  <span>smth</span><br />
  <span>smth</span><br />
  <span>smth</span><br />
  <span>smth</span><br />
  <span>smth</span><br />
  <span>smth</span><br />
  <span>smth</span><br />
  <span>smth</span><br />
  <span>smth</span><br />
  <span>smth</span><br />
  <span>smth</span><br />
  <span>smth</span><br />
  <span>smth</span><br />
  <span>smth</span><br />
  <span>smth</span><br />
  <span>smth</span><br />
  <span>smth</span><br />
  <span>smth</span><br />
  <span>smth</span><br />
  <span>smth</span><br />
  <span>smth</span><br />
  <span>smth</span><br />
  <span>smth</span><br />
  <span>smth</span><br />
  <span>smth</span><br />
</div>
Nhan
  • 3,595
  • 6
  • 30
  • 38
coolguy
  • 3,011
  • 2
  • 18
  • 35

1 Answers1

2

try this document.getElementById("content").scrollHeight

abhi110892
  • 300
  • 1
  • 7