How to get the height of a body element

Question

Here the total height of all <div>'s are 900 pixels, but the jQuery function returns the height of the body as 577 pixels. (If I remove the body CSS, it's working).

Is there a solution for this problem?

$j(function() {
    alert($j("body").height());
})

html, body {
    height:100%;
}

<div style="height:200px">header</div>
<div style="height:500px">content</div>
<div style="height:200px">footer</div>

Answer 1

Set

html { height: 100%; }
body { min-height: 100%; }

instead of height: 100%.

The result jQuery returns is correct, because you've set the height of the body to 100%, and that's probably the height of the viewport. These three DIVs were causing an overflow, because there weren't enough space for them in the BODY element. To see what I mean, set a border to the BODY tag and check where the border ends.

Answer 2

Simply use

$(document).height() // - $('body').offset().top

and / or

$(window).height()

instead of $('body').height();

Answer 3

$(document).height() seems to do the trick and gives the total height including the area which is only visible through scrolling.

Answer 4

I believe that the body height being returned is the visible height. If you need the total page height, you could wrap your div tags in a containing div and get the height of that.

Answer 5

We were trying to avoid using the IE specific

$window[0].document.body.clientHeight 

And found that the following jQuery will not consistently yield the same value but eventually does at some point in our page load scenario which worked for us and maintained cross-browser support:

$(document).height()