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>
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.
$(document).height() seems to do the trick and gives the total height including the area which is only visible through scrolling.