今天有人问我这个问题，做了个小例子来记录一下子。
首先这两个都是获取可视区域的高度，那他们有什么区别呢
1.window.innerHeight属于BOM（浏览器对象模型），而document.documentElement.clientHeight则属于文档对象模型
2.window.innerHeight获取的高度包含横向滚动条，而document.documentElement.clientHeight不包含横向滚动条
做了一个小示例
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <meta http-equiv="X-UA-Compatible" content="ie=edge"> <title>Document</title> <style> html,body{ margin: 0; padding: 0; height: 100%; width: 100%; } .box{ height: 100%; width: 100%; background-color: red; } </style> </head> <body> <div class="box"></div> <script> console.log('innerHeight:'+ window.innerHeight) console.log('clientHeight:'+ document.documentElement.clientHeight) </script> </body> </html>
此时运行打印结果：
innerHeight:760
clientHeight:760
可以看到没有横向滚动条时两者是相等的
现在我们将上面代码中box的宽度改为120%，使之出现横向滚动条
再看看结果
innerHeight:760
clientHeight:743
可以看到document.documentElement.clientHeight的高度少了一些，原因就是document.documentElement.clientHeight不包括横向滚动条