HTML - Page's Full Height including the content beyond the scroll

Question

Hi,

I need to find out height of a page including the content that goes beyond the vertical scrolls which is hidden. I have searched google and stackoverflow QA's but those solution don't apply to my situation.

One condition is I cannot change HTML or BODY css. Basically I am trying this out for a firefox extension

All the methods like

offsetHeight, scrollHeight, getComputedValue

didn't work somehow on a website noupe.com. Everytime I tried finding the body's above mentioned property it just gave me 18px even though the page height is more than 4000 px.

Tried jQuery's

$(document).height();

Didn't work too.

This is how I am finding out page height:

var x = window.content;
var pageBody = x.document.getElementsByTagName("body")[0];    
var my_pageheight = parseInt(x.document.defaultView.getComputedStyle(pageBody, "").getPropertyValue("height"));

This gives me 18px on noupe.com but WORKS WELL on other websites. Any clue how i can make this work.

Thanks

Answer 1

How about

$('body').height();

---

I was going to post an explanation, but Alex in the comments below did it for me, so instead I suppose I'll just post some links to places where you can find more information on this:

http://dev.opera.com/articles/view/35-floats-and-clearing/
http://www.smashingmagazine.com/2007/05/01/css-float-theory-things-you-should-know/

Also remember that since we're dealing with the body element we can't use the overflow: hidden method (which would remove the scrollbars from the page).

Also, thank goodness you can inject in new elements, I was thinking of using this as a solution...

var max = 0;

$('body *').each(function(){
    var current = $(this);
    if ((current.offset().top + current.height()) > max) max = current.offset().top + current.height();
});

Probably counts as one of the worst pieces of Javascript I've ever written, since you stated that you can't add anymore CSS or HTML. The following, (assuming you still need it) should work:

$('<div />').css({
    'height': 0,
    'width': 0,
    'visibility': 'hidden',
    'clear': 'both'
}).appendTo('body');

$('body').height();