这7种高度的基本含义：
screen.height：用户屏幕高度screen.availHeight：用户屏幕可用高度，减去了窗口工具值类的界面特征window.innerHeight：浏览器窗口的视口高度，包括水平滚动条window.outerHeight：浏览器窗口外部高度document.body.offsetHeight：文档中 body 部分的高度document.documentElement.clientHeight：文档可显示区域的高度document.documentElement.offsetHeight：文档本身的高度(html部分)
下面来比较一下这7个Height：
现有如下页面：
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
</head>
<body>
<p>今天天气不错</p>
</body>
</html>
- 首先，在浏览器不全屏的情况下，我们打印所要了解的 7 种 Height ：
<script>
console.log(screen.height); // 768
console.log(screen.availHeight); // 728
console.log(window.innerHeight); // 519
console.log(window.outerHeight); // 639
console.log(document.body.offsetHeight); // 22
console.log(document.documentElement.clientHeight); // 519
console.log(document.documentElement.offsetHeight); // 54
</script>
- 我们改变浏览器窗口高度后再来看这些值：
<script>
console.log(screen.height); // 768
console.log(screen.availHeight); // 728
console.log(window.innerHeight); // 433 变小
console.log(window.outerHeight); // 533 变小
console.log(document.body.offsetHeight); // 22
console.log(document.documentElement.clientHeight); // 433 变小
console.log(document.documentElement.offsetHeight); // 54
</script>
由此可见：
screen.height和screen.availHeight不会随浏览器窗口变化，只与用户屏幕尺寸有关window.innerHeight，window.outerHeight，document.documentElement.clientHeight都随着浏览器窗口变化window.innerHeight等于document.documentElement.clientHeight即文档可显示区域的高度一般就是浏览器视口的高度
-
另外我们发现
document.body.offsetHeight和document.documentElement.offsetHeight并不相等，而我们并由在 body之外添加别的内容或样式。造成两个不等的原因只有一个，就是浏览其默认样式。现在我们去除浏览器默认样式，在head 中添加如下代码：
<style>
*{margin: 0; padding: 0} // 去除浏览器默认样式
</style>
此时再打印 document.body.offsetHeight 和 document.documentElement.offsetHeight，两个值就相等了。
console.log(document.body.offsetHeight); // 22
console.log(document.documentElement.offsetHeight); //22
总结：
screen.height和screen.availHeight是与用户屏幕尺寸有关的数据，与浏览器和文档没有关系要获取浏览器视口的高度，使用
window.innerHeight或document.documentElement.clientHeight要获取文档内容的高度，使用
document.body.offsetHeight或document.documentElement.offsetHeight，在去除浏览器默认样式的情况下，两者相等-
window.innerHeight与window.outerHeight关系如下图：window.innerHeight & window,outerHeight.png
应用：
通常获取浏览器窗口高度和文档高度是为了做滚动条效果，滚动条的最大滚动距离，即 document.documentElement.scrollTOP 的最大值应是：
document.documentElement.offsetHeight 减去 window.innerHeight
