body元素height属性设为0px时如何获取文档的宽高尺寸？

你给body手动设置了height: 0px之后，body自身的盒模型高度被强制限制为0，直接读取body.clientHeight、body.offsetHeight这类属性只会返回0，和文档实际内容尺寸不匹配，可按照需求选择以下方案获取对应尺寸：

1. 获取文档实际内容的总宽高 #

即整个页面所有内容撑开的总尺寸，包含超出视口的滚动隐藏部分，不受body的高度样式限制：

• 总高度读取 document.documentElement.scrollHeight
• 总宽度读取 document.documentElement.scrollWidth

如果需要兼容IE8及更早版本的浏览器，可以做兜底判断取最大值：

const getDocSize = () => {
  const docWidth = Math.max(
    document.documentElement.scrollWidth,
    document.body.scrollWidth,
    document.documentElement.offsetWidth,
    document.body.offsetWidth,
    document.documentElement.clientWidth
  )
  const docHeight = Math.max(
    document.documentElement.scrollHeight,
    document.body.scrollHeight,
    document.documentElement.offsetHeight,
    document.body.offsetHeight,
    document.documentElement.clientHeight
  )
  return { width: docWidth, height: docHeight }
}

2. 获取浏览器视口的可见宽高 #

即当前浏览器窗口内可渲染页面的可见区域尺寸，和文档总内容长度无关：

• 视口宽度读取 document.documentElement.clientWidth
• 视口高度读取 document.documentElement.clientHeight

注意：不要使用window.innerWidth/window.innerHeight，这两个属性会将滚动条的宽度计算在内，和页面实际可用的视口尺寸存在偏差。
另外如果代码执行时机早于DOM加载完成，需要将逻辑放在DOMContentLoaded事件回调中，避免读取到错误的尺寸值。

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