问答详情
源自：9-18 浏览器窗口可视区域大小

为什么window.innerHeight和document.body.clientHeight的值会不一样呢？

<!DOCTYPE HTML>

<html>

<head>

<meta http-equiv="Content-Type" content="text/html; charset=utf-8">

</head>

<body>

<script type="text/javascript">

document.write(window.innerHeight+"<br/>"+window.innerWidth+"<br/>");

document.write(document.body.clientHeight+"<br/>"+document.body.clientWidth);

</script>

</body>

</html>


提问者：天问_0004 2014-11-18 08:37

个回答

  • 不再使用
    2017-02-24 23:40:35

    其实原因是：

    滚动条！！！

    你打开缩小窗口使得横纵都出现滚动条，会发现window.inner宽高总是比document.body.client宽高（firefox是document.documentElement.client宽高）多一个固定值（这个和各个浏览器有关），比如是站也10px差距吧。

    你把窗口拉大到滚动条消失（由于网页一般不止一屏那么长，所以纵向实验不好做，可以选百度或谷歌首页），再查询，会发现二者一致了。

    所以呢你这innerHeight实际是比clientHeight多了个滚动条的height。

    3
  • 不要这样看着我
    2016-12-12 15:21:24

    使用document.documentElement.clientHeight

    在compactMode为CSS1Compat时,document.documentElement.clientHeight = window.innerHeight

    1
  • TJcfeeL0
    2015-11-06 10:55:37

    确实不一样为什么呢

    0
  • 偌颜宁
    2014-11-18 13:39:59

    是有区别的前者是获取HTML的宽高，后者是获取body的宽高，分为两种写法就是为了解决兼容性问题，某些浏览器只认这两种的一种

    1