<!DOCTYPE html> <html lang="en-US"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>Document</title> </head> <style> body { width: 2000px; height: 2000px; border: 1px solid violet; padding: 10px 20px 30px 40px; margin: 10px 20px 30px 40px; background-color: silver; word-break: keep-all; /* white-space: nowrap; */ } html { /* border: 10px dashed maroon; padding: 10px 20px 30px 40px; margin: 10px 20px 30px 40px; */ background-color: lightcoral; } :where(dt, dd) { display: inline-block; } blockquote { font-weight: bolder; } </style> <body> <fieldset>don't set margin border padding on html</fieldset> <blockquote></blockquote> <blockquote></blockquote> <blockquote>document.body</blockquote> <dl></dl> <blockquote>document.documentElement</blockquote> <dl></dl> <script> function setup() { document.querySelector('blockquote:nth-of-type(1)').innerHTML = ` innerWidth: ${innerWidth} ` document.querySelector('blockquote:nth-of-type(2)').innerHTML = ` innerHeight: ${innerHeight} ` let body = document.querySelector('dl:nth-of-type(1)') body.innerHTML = ` <figure> <dt>clientWidth:</dt><dd>${document.body.clientWidth}</dd> </figure> <figure> <dt>offsetWidth:</dt><dd>${document.body.offsetWidth}</dd> </figure> <figure> <dt>scrollWidth:</dt><dd>${document.body.scrollWidth}</dd> </figure> <figure> <dt>clientHeight:</dt><dd>${document.body.clientHeight}</dd> </figure> <figure> <dt>offsetHeight:</dt><dd>${document.body.offsetHeight}</dd> </figure> <figure> <dt>scrollHeight:</dt><dd>${document.body.scrollHeight}</dd> </figure> ` let documentElement = document.querySelector('dl:nth-of-type(2)') documentElement.innerHTML = ` <figure> <dt>clientWidth:</dt><dd>${document.documentElement.clientWidth}</dd> </figure> <figure> <dt>offsetWidth:</dt><dd>${document.documentElement.offsetWidth}</dd> </figure> <figure> <dt>scrollWidth:</dt><dd>${document.documentElement.scrollWidth} document.body.offsetWidth + marginLeft</dd> </figure> <figure> <dt>clientHeight:</dt><dd>${document.documentElement.clientHeight}</dd> </figure> <figure> <dt>offsetHeight:</dt><dd>${document.documentElement.offsetHeight}</dd> </figure> <figure> <dt>scrollHeight:</dt><dd>${document.documentElement.scrollHeight} document.body.offsetHeight + marginTop + marginBottom</dd> </figure> ` } setup() </script> </body> </html>
<!DOCTYPE html> <html lang="en-US"> <head> <meta charset="UTF-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>Document</title> <style> html, body { height: 100%; } div { width: 500px; height: 500px; padding: 30px; border: 20px dashed maroon; margin: 10px; background-color: plum; position: relative; overflow-x: scroll; overflow-y: scroll; display: flow-root; } aside { width: 100px; height: 800px; padding: 30px; border: 20px dotted coral; margin: 10px; background-color: peru; position: absolute; top: 50px; } blockquote { font-weight: bolder; } :where(dt, dd) { display: inline-block; } </style> </head> <body> <div> <aside></aside> </div> <blockquote>div</blockquote> <dl></dl> <blockquote>aside</blockquote> <dl></dl> <script> function setup() { const div = document.querySelector('div') const aside = document.querySelector('aside') let d1 = document.querySelector('dl:nth-of-type(1)') d1.innerHTML = ` <figure> <dt>clientWidth:</dt><dd>${div.clientWidth}</dd> </figure> <figure> <dt>offsetWidth:</dt><dd>${div.offsetWidth}</dd> </figure> <figure> <dt>scrollWidth:</dt><dd>${div.scrollWidth}</dd> </figure> <figure> <dt>clientHeight:</dt><dd>${div.clientHeight}</dd> </figure> <figure> <dt>offsetHeight:</dt><dd>${div.offsetHeight}</dd> </figure> <figure> <dt>scrollHeight:</dt><dd>${div.scrollHeight}</dd> </figure> ` let d2 = document.querySelector('dl:nth-of-type(2)') d2.innerHTML = ` <figure> <dt>clientWidth:</dt><dd>${aside.clientWidth}</dd> </figure> <figure> <dt>offsetWidth:</dt><dd>${aside.offsetWidth}</dd> </figure> <figure> <dt>scrollWidth:</dt><dd>${aside.scrollWidth}</dd> </figure> <figure> <dt>clientHeight:</dt><dd>${aside.clientHeight}</dd> </figure> <figure> <dt>offsetHeight:</dt><dd>${aside.offsetHeight}</dd> </figure> <figure> <dt>scrollHeight:</dt><dd>${aside.scrollHeight}</dd> </figure> ` } setup() </script> </body> </html>