Document width/height

2009-09-05

Once and for a while, if you need to get the dimensions of the document. That means, the inside width and height of the content (so the height of the area your scrollbar allows you to cover), this is the crossbrowser variable you need:

width: document.documentElement.scrollWidth
height: document.documentElement.scrollHeight

Works in ie6~8, fx, o, s, c at time of writing.

With the gazillion dimensions available, one tends to get lost:

document.body.scrollWidth / document.body.scrollHeight
screen.availWidth / screen.availHeight
window.innerWidth / window.scrollMaxX
document.body.scrollWidth / document.body.scrollHeight
document.body.offsetWidth / document.body.offsetHeight
document.documentElement.clientWidth / document.documentElement.clientHeight
self.outerWidth / self.outerHeight
document.documentElement.clientWidth / document.documentElement.clientHeight
document.documentElement.innerWidth / document.documentElement.innerHeight
document.documentElement.outerWidth / document.documentElement.outerHeight
document.documentElement.offsetWidth / document.documentElement.offsetHeight
document.body.clientWidth / document.body.clientHeight
document.body.offsetWidth / document.body.offsetHeight
document.documentElement.scrollWidth / document.documentElement.scrollHeight

Note that, while many of these return the same in most browsers, none are completely crossbrowser, except the one mentioned before. Also, for most browsers, none of these actually report the area of the main document. Most report viewport, browser size or even screen resolution.

Hope it helps you!