javascript document.documentElement.clientHeight 和 document.body.clientHeight 的区别
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/8052178/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
difference between document.documentElement.clientHeight and document.body.clientHeight
提问by NoodleOfDeath
What is the difference between document.documentElement.clientHeightand document.body.clientHeight? Are the return values consistent across all web browsers or does each evaluate them differently?
document.documentElement.clientHeight和 和有什么不一样document.body.clientHeight？返回值在所有 Web 浏览器中是否一致，还是每个浏览器对它们的评估都不同？
In my particular case, the documentElementseems to have a smaller height than the bodyelement, which does not make sense. Why does this happen?
在我的特殊情况下，documentElement似乎比body元素具有更小的高度，这是没有意义的。为什么会发生这种情况？
回答by Guffa
The document.documentElementproperty gives you the htmlelement, while the document.bodyproperty gives you the bodyelement.
该document.documentElement物业为您提供了html元素，而document.body财产给你body的元素。
The window.innerHeightproperty returns the height of the window rather than the height of the content.
该window.innerHeight属性返回窗口的高度而不是内容的高度。
Different browsers will give you different values for the size of those elements, and the same browser may give you different values depending on whether the page is rendered in Quirks Mode or Standards Compliance Mode, and whether you are using HTML or XHTML. The htmlelement can either represent the window, or the entire page. The bodyelement can either be the same size as the htmlelement, or the size of the content in the page.
不同的浏览器会为这些元素的大小提供不同的值，而同一个浏览器可能会为您提供不同的值，具体取决于页面是在 Quirks 模式还是标准合规模式下呈现，以及您使用的是 HTML 还是 XHTML。该html元素既可以代表窗口，也可以代表整个页面。所述body元件可以是相同大小的html元件，或在页面中的内容的大小。
The htmland bodyelements are "magical" elements that doesn't exist in the same way as other elements. In XHTML they were changed so that they work more like real elements, but there are still some things that are "magic". For example, the bodyelement doesn't have a background on it's own, instead the htmland bodyshare the same background, and it always covers the entire window even if the bodyelement doesn't.
在html和body元素是不会以同样的方式作为与其它元素存在“神奇”的元素。在 XHTML 中，它们被更改为更像真正的元素，但仍然有一些“神奇”的东西。例如，body元素本身没有背景，而是html和body共享相同的背景，并且即使body元素没有，它也始终覆盖整个窗口。
回答by NoodleOfDeath
I figured out the issue! It had to do with my DOCTYPE declaration right before the HTML tag. Without the doctype, the documentElement and body actually switch. Thanks for everyone else's help too :D
我想通了这个问题！它与我在 HTML 标签之前的 DOCTYPE 声明有关。如果没有 doctype，documentElement 和 body 实际上会切换。也感谢其他人的帮助：D
回答by ThiefMaster
Let's ask good old firebug (for the sake of being lazy, I did it right here on SO) for the different between those two objects:
让我们问问老萤火虫（为了懒惰，我就在 SO 上这样做了）这两个对象之间的差异：
>>> document.documentElement
<html>
>>> document.body
<body class="question-page">
So, document.documentElementpoints to the top-level <html>element while document.bodypoints to the <body>element.
所以，document.documentElement指向顶层<html>元素而document.body指向<body>元素。
