revision:
The property returns the height of an element including padding, but excluding borders, scrollbars, or margins. It returns the height in pixels.
The property is read-only.
Syntax:
element.scrollHeight : returns the height of the element, in pixels.
property value:
none :
example
<div>
<div id="DIV">
<div id="content">Some content..</div>
</div>
<p id="prop"></p>
</div>
<style>
#DIV{ margin-top: 10px; height: 250px; width: 250px; overflow: auto;}
#content { height: 800px; width: 2000px; padding: 10px; background-color: coral;}
</style>
<script>
const element = document.getElementById("content");
let a = element.scrollHeight;
let b = element.scrollWidth;
document.getElementById ("prop").innerHTML = "Height: " + a + " Width: " + b;
</script>
These properties return the height and width including padding, but excluding borders, scrollbars, or margins.
<div id="DIV1">
<p>These properties return the height and width including padding, but excluding borders,
scrollbars, or margins.</p>
<div id="content1">Some content..Some content..Some content..Some content..Some content..
ome content..Some content..Some content..Some content..Some content..Some content..
Some content..Some content..Some content..Some content..Some content..Some content..
Some content..Some content..Some content..Some content..Some content..Some content..
Some content..Some content..Some content..Some content..Some content..Some content..
Some content..Some content..Some content..Some content..</div>
<p id="prop1"></p>
</div>
<style>
#content1 { height: 350px; width: 350px; padding: 10px; background-color: coral;}
</style>
<script>
const element1 = document.getElementById("content1");
let y = element1.scrollHeight;
let x = element1.scrollWidth;
document.getElementById ("prop1").innerHTML = "Height: " + y + " Width: " + x;
</script>