window.innerHeight属性和用法
是什么
innerHeight 和 innerWidth 都是window 的属性，
表示文档显示区域的宽高，不包括工具栏等
怎么获取
最新的浏览器都可以用window.innerHeight获取
兼容性
这个属性ie9+支持，其他的不支持
可以这样获取：
console.log(document.documentElement.clientHeight)
或者这样：
console.log(document.body.clientHeight)
两者区别：
- 文档中没有文档，那么document.body.clientHeight=0
- document.body.clientHeight 显示的是文档中已有内容撑开的区域
- window.innerHeight 和 ie的document.documentElement.clientHeight显示的是文档的区域
- 就算里面没有内容，也是显示出应有的数值
与clientHeight的区别
- window.innerHeight属于BOM（浏览器对象模型），而document.documentElement.clientHeight属于文档对象模型
- window.innerHeight获取的高度包含横向滚动条，而document.documentElement.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不包括横向滚动条
