javascript - document.documentElement.clientHeight 和 document.body.clientHeight 的区别

Question

document.documentElement.clientHeight 和 document.body.clientHeight 有什么区别？返回值在所有 Web 浏览器中是否一致，或者每个浏览器的评估方式不同？

在我的特殊情况下，documentElement 的高度似乎小于 body 元素，这没有意义。为什么会这样？

Answer 1

document.documentElement 属性为您提供了 html 元素，而 document.body 属性为您提供了 body 元素。

window.innerHeight 属性返回窗口的高度而不是内容的高度。

不同的浏览器会为这些元素的大小提供不同的值，同一个浏览器可能会根据页面是以 Quirks Mode 还是 Standards Compliance Mode 呈现以及您使用的是 HTML 还是 XHTML 来提供不同的值。 html 元素可以代表窗口，也可以代表整个页面。 body 元素可以与 html 元素大小相同，也可以与页面中内容的大小相同。

html 和body 元素是“魔法”元素，它们的存在方式与其他元素不同。在 XHTML 中，它们发生了变化，因此它们更像真实元素，但仍有一些东西是“神奇的”。例如，body 元素本身没有背景，html 和 body 共享相同的背景，并且它始终覆盖整个窗口，即使 body 元素没有。