W3Schools Tryit Editor

<!DOCTYPE html>
<html>
<style>
#content {
  height: 100px;
  width: 100px;
  background-color: coral;
  padding: 15px;
  border: 10px solid black;
  margin: 10px;
  overflow: scroll;
}
</style>

<body>
<h1>The Element Object</h1>
<h2>The scrollHeight and scrollWidth Properties</h2>

<p>These properties return the height and width including padding, bet excluding borders, scrollbars, or margins.</p>

<p>Try to remove and/or change the different CSS property values, and click "Run" again to understand how it works.</p>

<div id="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..Some content..Some content..Some content..Some content..Some content..Some content..</div>

</body>
</html>

​x
 
<!DOCTYPE html><html><style>#content {  height: 100px;  width: 100px;  background-color: coral;  padding: 15px;  border: 10px solid black;  margin: 10px;  overflow: scroll;}</style>​<body><h1>The Element Object</h1><h2>The scrollHeight and scrollWidth Properties</h2>​<p>These properties return the height and width including padding, bet excluding borders, scrollbars, or margins.</p>​<p>Try to remove and/or change the different CSS property values, and click "Run" again to understand how it works.</p>​<div id="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..Some content..Some content..Some content..Some content..Some content..Some content..</div>​<p id="demo"></p>​<script>const element = document.getElementById("content");let y = element.scrollHeight;let x = element.scrollWidth;document.getElementById ("demo").innerHTML = "Height: " + y + " Width: " + x;</script>​</body></html>​