document.documentElement.clientHeight与document.body.clientHeight的区别是什么

• 指向的节点对象不同
  document.documentElement 对应HTML文档的根标签 <html>，它的clientHeight属性统计的是根元素的可视高度。
  document.body 对应HTML的<body>标签，它的clientHeight属性统计的是body元素自身的可视高度。

• 默认取值逻辑不同
  浏览器默认会给<body>设置margin值（多数浏览器默认是8px），如果没有手动重置样式，也没有给<body>设置100%高度的话：

  1. 页面内容高度小于浏览器视口高度时，document.body.clientHeight 等于内容撑开的实际高度，而document.documentElement.clientHeight 等于当前浏览器窗口的可视高度。
  2. 页面内容高度超出浏览器视口高度时，document.body.clientHeight 等于body自身的内容高度（包含padding，不含margin、border、滚动条），而document.documentElement.clientHeight 仍然等于浏览器窗口的可视高度。

• 兼容模式下表现不同

  1. 浏览器运行在W3C标准模式时，要获取浏览器可视区高度必须取document.documentElement.clientHeight。
  2. 浏览器运行在怪异兼容模式（Quirks Mode）时，document.documentElement.clientHeight 取值会失效，此时需要通过document.body.clientHeight 来获取可视区高度。

• 常用兼容写法
  如果需要兼容不同模式下的视口高度获取，可以这么写：

const viewportHeight = document.documentElement.clientHeight || document.body.clientHeight

内容的提问来源于stack exchange，提问作者mbmdi