CODEWITHSUNDEEP
javascriptjqueryhtmlcss
Solace
Solace

Reputation: 9010

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

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.

Upvotes: 1

Views: 2863

Answers (2)

Benneb10
Benneb10

Reputation: 1489

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

Upvotes: 3

Saurav Rastogi
Saurav Rastogi

Reputation: 9731

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.

Upvotes: 0

Related Questions