18

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>

5 Answers 5

42

Simply use

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

and / or

$(window).height()

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

3
  • this is also nice one Mr.OderWat, but i am getting 8px extra than that of actual size.(by using $(document).height() ). Commented May 1, 2009 at 6:00
  • 3
    Those 8 pixels "more" are correct. They are the margins of the document. You may either use: body { height:100%; margin:0 } or you substract the offset using $(document).height()-$("body").offset().top
    – OderWat
    Commented May 2, 2009 at 14:48
  • 3
    $("body").offset().top works for equal margins on body but if the bottom margin is set specifically, it won't work. Also, I tried $("body").css("margin-bottom") but that returns with the units and it may not always be in pixels. Are there any other ways to find out the "more"?
    – Jiho Han
    Commented Sep 28, 2010 at 18:47
28

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.

5
  • While this may work for this case, this isn't an answer to the asked question. stackoverflow.com/questions/1304378/jquery-web-page-height
    – B T
    Commented Sep 13, 2010 at 21:48
  • 1
    this body { min-height: 100%; } was a really good suggestion.
    – foxybagga
    Commented Dec 2, 2011 at 9:27
  • 1
    Should that CSS setting be for html and not for head as written? Commented Oct 19, 2012 at 17:16
  • 1
    @Robert Koritnik: thanks. Don't know how I didn't notice the typo for so long.
    – Rafael
    Commented Oct 19, 2012 at 17:56
  • thanks @Rafael , even after so many years, your answer is still appreciated.
    – Fausto R.
    Commented Nov 17, 2013 at 18:31
2

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

0

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.

0

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()
1
  • You need to indent by 4 spaces to create a code block, you were one short on each.
    – Adi Inbar
    Commented Apr 23, 2014 at 3:05

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge you have read our privacy policy.

Not the answer you're looking for? Browse other questions tagged or ask your own question.