Run ❯
zig
.
com
Result Size:
625 x 565
×
Change Orientation
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> <!-- /jsref/tryit.asp?filename=tryjsref_element_scrollheight2 Thu, 06 Feb 2025 18:36:25 GMT --> </html>