网页可见区域高：document.body.clientHeight
网页正文全文高：document.body.scrollHeight
clientHeight： 表示可视区域高度， 包括padding但不包括border、水平滚动条、margin的元素的高度
offsetHeight：表示可视区域高度，包括padding、border、水平滚动条，但不包括margin的元素的高度
scrollHeight: 当元素的子元素高度大于父元素，父元素出现滚动条，此时父元素的clientHeight表示可视的高度，父元素的scrollHeight 表示页面的高度，包括溢出页面被挡住的部分，即其实就是子元素的高度。在没有滚动条时scrollHeight 与clientHeight相等恒成立。单位px，只读元素 。
document.documentElement表示文档的根元素，即html元素
document.body 表示文档中body元素
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<style>
* {
margin: 0;
padding: 0;
}
html {
height: 100%;
}
body {
height: 100%;
}
.wrap {
height: 100%;
width: 90%;
background-color: #9a6e3a;
overflow: auto;
}
.box {
height: 2000px;
width: 50%;
background-color: red;
}
</style>
</head>
<body>
<div class="wrap">
<div class="box"></div>
</div>
</body>
<script>
window.onload = function () {
let $box = document.querySelector('.box')
let $wrap = document.querySelector('.wrap')
console.log(document.documentElement.clientHeight) //屏幕可视区域高度 458
console.log(document.body.clientHeight) //屏幕可视区域高度 458
console.log($wrap.clientHeight) //屏幕可视区域高度 458
//子元素高于父元素，内部有滚动条，此时高度包含子元素溢出的部分，即等于子元素高度
console.log($wrap.scrollHeight)
console.log($box.clientHeight) //子元素内部没有滚动条 等于子元素实际高度
console.log($box.offsetHeight) //子元素内部没有滚动条 等于子元素实际高度
}
</script>
</html>
