Foliotek Development Blog

Finding real body height using jQuery

by Luke Daffron

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:


document.body.clientHeight;


document.body.offsetHeight;


document.body.scrollHeight;

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:


$("body").height();

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()
{
if($.browser.msie)
{
var $temp = $("<div>")
.css("position","absolute")
.css("left","-10000px")
.append($("body").html());

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

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

Tags: , , , , , ,

« »

11 Responses to “Finding real body height using jQuery”

  1. Paul Irish Says:

    Also:

    $(document).height();

    :)

  2. 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.

  3. 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.

  4. 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

  5. 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.

  6. 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.

  7. James Says:

    Another way:

    http://james.padolsey.com/javascript/get-document-height-cross-browser/

  8. 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.

  9. JDStraughan Says:

    This is a great jquery tutorial. Has been added to tutlist.com

  10. alice Says:

    hi,

    i like your finding height for msie

  11. Hire PHP Developers Says:

    Thanks For this cool Info.

Leave a Reply