difference between document.documentElement.clientHeight and document.body.clientHeight
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.
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
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:
>>> document.documentElement
<html>
>>> document.body
<body class="question-page">
So, document.documentElement points to the top-level <html> element while document.body points to the <body> element.