Run ❯
Get your
own
website
Result Size:
625 x 565
×
Change Orientation
Save Code
Change Theme, Dark/Light
Go to Spaces
<!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>