window.innerHeight属于BOM(浏览器对象模型),获取的高度包含横向滚动条
document.documentElement.clientHeight属于文档对象模型,不包含横向滚动条
document.body.clientHeight属于文档对象模型,body高度,如果设置body height=100%,document.documentElement.clientHeight=document.body.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%; 100%; } .box{ height: 100%; 120%; background-color: red; } </style> </head> <body> <div class="box"></div> <script> console.log('innerHeight:'+ window.innerHeight) console.log('documentElement.clientHeight:'+ document.documentElement.clientHeight) console.log('body.clientHeight:'+ document.body.clientHeight) </script> </body> </html>