如果你在网上搜索这个题目得到答案大都是
document.body.clientHeight
但真实情况是,在当下很多时候用这行代码获取到的不是浏览器可视高度而是整个body的高度。
比如我们现在打开网易首页(或者其他主要门户网站)在chrome控制台输入这行代码后得到数会非常大
document.body.clientHeight
9813
而如果我们输入
document.documentElement.clientHeight
1297
明显后面这个得到结果合理的多,实际上也正是浏览器的可见高度。你可以窗口化浏览器,调整一下浏览器的高度,再输入上面的代码会发现得到数字发生了变化,但是body.clientHeight的数字始终不变。
但如果我们打开的网站是百度,再输入上面的两种代码会得到下面的结果
document.body.clientHeight
1297
document.documentElement.clientHeight
1297
你会发现两个代码得到的数字一样。OK,所有这些疑问我们来解释一下原因。
这里我要再说一次,网上说的利用body.clientHeight获取浏览器可视窗口高度的方法都是错误的。这里的根本原因在于当我们编写一个网页的时候是否会写!DOCTYPE。至于什么是!DOCTYPE这里不阐述了,不知道可以自行搜索。如果你不写,严格来说这个网页并不符合标准但是依然会显示(准确来说是进入Quirks模式)。在这种模式下body.clientHeight显示的确实是浏览器可见窗口的高度,可这是不规范的。但凡使用!DOCTYPE声明,无论是声明HTML5还是4还是XHTML,body.clientHeight所获取的都是整个body的高度。而document.documentElement.clientHeight则刚好相反,在所有已声明的网页中显示正确的浏览器可视窗口高度。
而针对上面所说的百度首页的两种代码获取高度一致的问题,其实很容易看到百度首页的style中
html {
height: 100%;
}
body {
height: 100%;
}
强制将body和html高度拉至一样,两种代码所显示高度就是一样的了。



