<!DOCTYPE html>
<html>
<head>
<style>
#content {
height: 100px;
width: 100px;
background-color: coral;
padding: 15px;
border: 10px solid black;
margin: 10px;
overflow: scroll;
}
</style>
</head>
<body>
<p>Click the button to get the entire height (vertically) and width (horizontally) of div.</p>
<p>Note that these properties return the height and width including padding, but not the border, scrollbar or margin.</p>
<p><strong>Tip:</strong> Try to remove and/or change the different CSS property values, and then click the button again to understand how it works.</p>
<button onclick="myFunction()">Try it</button>
<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>
function myFunction() {
var elmnt = document.getElementById("content");
var y = elmnt.scrollHeight;
var x = elmnt.scrollWidth;
document.getElementById ("demo").innerHTML = "Height: " + y + "px<br>Width: " + x + "px";
}
</script>
</body>
</html>