Difference between Element.scrollHeight and the height returned by height() method

Question

What is the difference between Element.scrollHeight and the height returned by the JQuery $(ElementSelector).height() method.

I have seen this and this and I know that scrollHeight is the height of content, including the content which overflows outside the viewport. My question is that isn't that the same as the height returned by the height() method. I wrote this JSFiddle as a test of that.

Here's a basic fiddle that goes with Saurav's answer too https://jsfiddle.net/bvvqLyry/ — ColdFrog, Dec 08 '16 at 15:45
@Benneb10 Thank you, If you can write that as an answer, I'd like to mark it as the accpted answer — Solace, Dec 08 '16 at 15:57

score 3 · Accepted Answer · answered Dec 08 '16 at 16:15

Another difference is...

The height property sets the height of an element and does not include padding, borders, or margins; it sets the height of the area inside the padding, border, and margin of the element.

scrollHeight includes the element's padding, but not its border or margin.

https://developer.mozilla.org/en-US/docs/Web/API/Element/scrollHeight

score 0 · Answer 2 · answered Dec 08 '16 at 15:41

0

height():

returns the actual height of an element in pixels.

scrollHeight():

is a measurement of the height of an element's content including content not visible on the screen due to overflow

Learn more about Box Model.

answered Dec 08 '16 at 15:41

Saurav Rastogi

9,575
3
29
41

Difference between Element.scrollHeight and the height returned by height() method

2 Answers2