Anyone know how to calculate the DOCUMENT dimensions, NOT the VIEWPORT in Javascript?

Question

Just to make sure everyone understands what I am asking for, I will run through what I believe are the basic distinctions between document, window, and viewport....

WINDOW is the entire browser window, including all nav bars, etc....

VIEWPORT is the portion of the window used to view the current XHTML/HTML/Flash document...

DOCUMENT is the actual content area, akin to the body but includes ALL of the page's content. Only a portion of it is visible at any one time in the VIEWPORT (unless the page is the same size or smaller than the viewport).

Now, there are many great answers for how to get the VIEWPORT dimensions. I am already well versed in that... cross-browser and all.

What I really need to know is a simple, cross-browser solution that will give me the dimensions of the actual DOCUMENT in all browsers (no versions older than 3 years).

I thought I found a great solution here once... long ago... but now I cannot find it.

Anyone? Thanks for the read and hopefully someone can help.

P.S. Did I mention I DO NOT want solutions for calculating the VIEWPORT? OR THE WINDOW?

UPDATE: this solution MUST work in Opera 10.x, FireFox 3.6.x, IE 7/8/x, Flock 2.x, Safari 4.x... None of the answers below work in all browsers....

So, if you have not tested it in all, please do not respond to the question.

Answer 1

I think if you wrap your entire contents into a DIV element with zero borders, padding and margins, then when the browser is finished rendering you can use jQuery's .height() method to interrogate the wrapping DIV for its actual height.

I have done this before, and I found I had specific problems with various browsers. You may not run into those problems that I had, but I ended up settling on this solution.

Answer 2

document.body.scrollHeight and document.body.scrollWidth.

Should give it to you.

Answer 3

I stole this from jQuery's source and made a wrapper around it:

EDIT: Refactored the function so it returns both width and height in an array.

function getDocumentDimensions() {
    var d = document;
    return [
        Math.max(
            d.documentElement['clientHeight'],
            d.body['scrollHeight'],
            d.body['offsetHeight']
        ),
        Math.max(
            d.documentElement['clientWidth'],
            d.body['scrollWidth'],
            d.body['offsetWidth']
        )
     ]
};

getDocumentDimensions() // [1284, 1265]

the jQuery for this would be $(document).height() and width.

Answer 4

Sorry, but none of these answers were what I was looking for. In the end, I decided to just stick with document.body.getWidth() and document.body.getHeight() in Prototype.

Answer 5

We have a similar need and use this code. It's not tested in opera/flock, but we cover all the other browsers. Note that it's not always quite perfect, but does the job in 99%+ of the cases.

function getContentWidthHeight() {
    var pageWidth = 0; 
    var pageHeight = 0;

    if (window.innerHeight && window.scrollMaxY) {
        pageWidth = window.innerWidth + window.scrollMaxX;
        pageHeight = window.innerHeight + window.scrollMaxY;
    } 
    if (document.body.scrollHeight) {
        pageWidth = Math.max(pageWidth, document.body.scrollWidth);
        pageHeight = Math.max(pageHeight, document.body.scrollHeight);
    }
    if (document.body.offsetHeight) {
        pageWidth = Math.max(pageWidth, document.body.offsetWidth);
        pageHeight = Math.max(pageHeight, document.body.offsetHeight);
    }
    if (document.documentElement.offsetHeight) {
        pageWidth = Math.max(pageWidth, document.documentElement.offsetWidth);
        pageHeight = Math.max(pageHeight, document.documentElement.offsetHeight);
    }
    if (document.documentElement.scrollHeight) {
        pageWidth = Math.max(pageWidth, document.documentElement.scrollWidth);
        pageHeight = Math.max(pageHeight, document.documentElement.scrollHeight);
    }
    return [ pageWidth, pageHeight ];
};