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>

score 42 · Answer 1 · edited Nov 22 '13 at 16:21

42

Simply use

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

and / or

$(window).height()

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

edited Nov 22 '13 at 16:21

Mark Walters

12,060
6
33
48

answered Apr 30 '09 at 12:16

OderWat

5,379
3
29
31

this is also nice one Mr.OderWat, but i am getting 8px extra than that of actual size.(by using $(document).height() ). – Shiva Srikanth Thummidi May 01 '09 at 06: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 May 02 '09 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 Sep 28 '10 at 18:47

score 28 · Accepted Answer · edited Feb 28 '15 at 22:39

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.

edited Feb 28 '15 at 22:39

Peter Mortensen

30,738
21
105
131

answered Apr 30 '09 at 11:15

Rafael

18,349
5
58
67

While this may work for this case, this isn't an answer to the asked question. http://stackoverflow.com/questions/1304378/jquery-web-page-height – B T Sep 13 '10 at 21:48
1

this body { min-height: 100%; } was a really good suggestion. – foxybagga Dec 02 '11 at 09:27
1

Should that CSS setting be for **html** and not for **head** as written? – Robert Koritnik Oct 19 '12 at 17:16
1

@Robert Koritnik: thanks. Don't know how I didn't notice the typo for so long. – Rafael Oct 19 '12 at 17:56
thanks @Rafael , even after so many years, your answer is still appreciated. – Fausto R. Nov 17 '13 at 18:31

score 2 · Answer 3 · answered Nov 27 '10 at 15:45

2

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

answered Nov 27 '10 at 15:45

Mark

3,389
2
28
52

score 0 · Answer 4 · edited Apr 23 '14 at 03:05

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()

edited Apr 23 '14 at 03:05

Adi Inbar

12,097
13
56
69

answered Apr 23 '14 at 02:43

Owain Glyndŵr

71
1
3

You need to indent by 4 spaces to create a code block, you were one short on each. – Adi Inbar Apr 23 '14 at 03:05

score 0 · Answer 5 · answered Apr 30 '09 at 11:16

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.

answered Apr 30 '09 at 11:16

Fenton

241,084
71
387
401

How to get the height of a body element

5 Answers5

Linked