为何window.innerHeight大于document.body.scrollHeight？示例网站场景疑问

嘿，这个疑问其实挺典型的，我来给你一步步理清楚：

一、为什么会出现window.innerHeight > document.body.scrollHeight？ #

首先得明确这两个属性的本质：

• window.innerHeight：指的是浏览器视口的高度（就是你当前能看到的页面区域，包含滚动条的高度，如果存在的话），它的大小完全取决于你浏览器窗口的尺寸。
• document.body.scrollHeight：指的是body元素的内容总高度（包括那些溢出视口、需要滚动才能看到的部分），但它的大小由body内部的内容多少决定——如果body里的内容很少，比如只有几行文字，那它的scrollHeight就是这些内容实际占的高度，自然可能比你的浏览器视口高度小。

举个简单例子：你打开一个新的空白HTML页面，里面只写了一行<p>Hello World</p>，这时候body的scrollHeight就是这行文字的高度（加上body默认的padding/margin），而如果你的浏览器窗口拉得比较大，window.innerHeight肯定会比这个值大。

二、为什么example.com会出现这种情况？ #

你提到的example.com页面内容极其简洁，只有一段说明文字和一个链接，整个body的内容高度远小于普通桌面浏览器的视口高度（比如你把浏览器窗口最大化，视口高度可能有800px以上，但example.com的body内容高度可能只有200px左右），所以自然就出现了window.innerHeight > document.body.scrollHeight的情况。

纠正一个误解：scrollHeight并非“始终是最大的高度值” #

你之前以为scrollHeight总是最大的，其实是混淆了它的适用场景——scrollHeight是单个元素的内容总高度，它只和这个元素内部的内容有关，和浏览器视口没有必然的“谁大谁小”关系：

• 如果元素内容很多，溢出了视口，那它的scrollHeight会大于window.innerHeight；
• 如果元素内容很少，没填满视口，那它的scrollHeight就会小于window.innerHeight。

另外还要注意一点：浏览器的默认样式可能会影响这个结果，比如有些浏览器会给body设置默认的margin（比如8px），但这只会让body的scrollHeight增加一点点，只要内容本身不够多，还是会小于视口高度。

内容的提问来源于stack exchange，提问作者o0omycomputero0o