Finding real body height using jQuery

Add to FacebookAdd to DiggAdd to Del.icio.usAdd to StumbleuponAdd to RedditAdd to BlinklistAdd to TwitterAdd to TechnoratiAdd to Yahoo BuzzAdd to Newsvine

Sometimes, you need to know the full content of a document’s height. In our case, we needed to set an iframe to be the full height of its content.  There are several ways to attempt this:


I’ve found that all of these require significant tweaking to get accurate results across all browsers. Each property means something different in each browser. That sucks for coding and maintenance. Enter jQuery:


Unfortunately, even that doesn’t seem to work very well in IE.

Here’s a workaround that should always work, though. Basically, you create a temporary div that contains everything from the body, insert it off screen, and measure it:

function getDocumentHeight()
       var $temp = $("<div>")

        var h = $temp.height();
        return h;
    return $("body").height();

It seems like it would be really inefficient, but it actually performs fairly well.


11 Responses to “Finding real body height using jQuery”

  1. Paul Irish Says:




    • Luke Daffron Says:

      If that works in your situation, great. That should always be the first thing you try. In my tests, it doesn’t give accurate values for certain pages in IE. Being short by 10 or so pixels didn’t cut it in our situation, because the iframe would clip off the content.

      • Paul Irish Says:

        Ah yes. I know there were some gotchas when checking the height of an iframe’d document.
        I’m fairly certainly Brandon Aaron knocked in some fixes for that for 1.3.3

      • Luke Daffron Says:

        Thanks for the info. It’d be great if my (admittedly hack-ish) solution to the problem isn’t needed anymore. I’ll have to play with 1.3.3 and see.

  2. thany Says:

    Is this trick necessary for all IE versions? I would think that IE7, or at least IE8 shouldn’t need a workaround like that.

    • Luke Daffron Says:

      I don’t think its always necessary. There are some types of documents that report size correctly. I meant this post mainly to help people who are currently failing to get the right value. Try $(“body”).height() or $(document).height() first and see if it is sufficient.

      As far as my particular situation went, all versions of IE seemed to suffer from the problem. My best guess is that jQuery checks the current browser and chooses the appropriate document.body.scrollHeight type property. And, for whatever reason, IE can’t seem to report that value correctly despite all of its various rendering engines.

    • Luke Daffron Says:

      In my case, I wanted the exact height of the document in an iframe – which could potentially be zero if it didn’t contain anything. Your code would be useful in different cases – it returns the height of the window if there are no contents.

  3. JDStraughan Says:

    This is a great jquery tutorial. Has been added to

  4. alice Says:


    i like your finding height for msie

  5. Hire PHP Developers Says:

    Thanks For this cool Info.

Leave a Reply to Paul Irish Cancel reply

Fill in your details below or click an icon to log in: Logo

You are commenting using your account. Log Out /  Change )

Google photo

You are commenting using your Google account. Log Out /  Change )

Twitter picture

You are commenting using your Twitter account. Log Out /  Change )

Facebook photo

You are commenting using your Facebook account. Log Out /  Change )

Connecting to %s

%d bloggers like this: