innerHeight 和 innerWidth 都是window 的属性，
表示文档显示区域的宽高，不包括工具栏等
最新的浏览器都可以用window.innerHeight获取
这个属性ie9+支持，其他的不支持
可以这样获取：
console.log(document.documentElement.clientHeight)
或者这样：
console.log(document.body.clientHeight)
两者区别：
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<meta name="viewport" content="width=device-width, initial-scale=1">
<title></title>
<style type="text/css">
html,body{
margin: 0;
padding: 0;
width: 100%;
height: 100%;
}
div{
width: 100%;
height: 100%;
background: lightblue;
}
</style>
</head>
<body>
<div></div>
<script type="text/javascript">
console.log('innerHeight'+window.innerHeight);//innerHeight502
console.log('clientHeight'+document.documentElement.clientHeight);//clientHeight502
</script>
</body>
</html>此时打印结果：
innerHeight502
clientHeight502
当出现横向的滚动条的时候，ocument.documentElement.clientHeight所获得的高度就不包含滚动条的高度
此时打印结果：
innerHeight502
clientHeight485
可以看到document.documentElement.clientHeight的高度少了一些，原因就是document.documentElement.clientHeight不包括横向滚动条
原文：https://www.cnblogs.com/my466879168/p/12291360.html