difference between document.documentElement.clientHeight and document.body.clientHeight

Question

What is the difference between document.documentElement.clientHeight and document.body.clientHeight? Are the return values consistent across all web browsers or does each evaluate them differently?

In my particular case, the documentElement seems to have a smaller height than the body element, which does not make sense. Why does this happen?

Answer 1

The document.documentElement property gives you the html element, while the document.body property gives you the body element.

The window.innerHeight property returns the height of the window rather than the height of the content.

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 html element can either represent the window, or the entire page. The body element can either be the same size as the html element, or the size of the content in the page.

The html and body elements 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 body element doesn't have a background on it's own, instead the html and body share the same background, and it always covers the entire window even if the body element doesn't.