2

I have my browser (FF & Chrome) maximized. document.body.clientHeight is reporting 128. This seems too small. The viewable area is at least 960px and I measured it with a screen ruler. I am not using iFrames. Isn't document.body the body tag which is the viewable area? What am I missing?

rink.attendant.6
  • 44,500
  • 61
  • 101
  • 156
Tony_Henrich
  • 42,411
  • 75
  • 239
  • 374
  • Does the body expand to take up the whole height of the viewport? – Ian Aug 09 '13 at 18:10
  • 2
    You're probably looking for `window.innerHeight`. – Dogbert Aug 09 '13 at 18:11
  • 2
    @Dogbert Probably not, because it has poor support in IE, while `document.documentElement.clientHeight` should be more compatible – Ian Aug 09 '13 at 18:12
  • possible duplicate of [Get the browser viewport dimensions with Javascript](http://stackoverflow.com/questions/1248081/get-the-browser-viewport-dimensions-with-javascript) – Ian Aug 09 '13 at 18:13
  • @Ian I found out it doesn't. It's only the height of the nav bar. I thought by default the body's height is the height of the sum of all the elements in the body tag. – Tony_Henrich Aug 09 '13 at 18:53
  • @Tony_Henrich Exactly, all elements, by default, have a height as big as its contents make it. You can obviously change that by changing the CSS style – Ian Aug 09 '13 at 18:54
  • @ian I am looking at a library code not written by me. The code seems to get the window height by using document.body.clientHeight – Tony_Henrich Aug 09 '13 at 18:57

2 Answers2

3

If you inspect the body element in Firebug, you'll see that it only expands to the height of its contents. This may be more or less than the height of the viewport, depending on the amount and dimensions of content.

Try document.documentElement.clientWidth and document.documentElement.clientHeight.

See jsFiddle.

Another interesting thing is the viewport (vh and vw) units in CSS.

rink.attendant.6
  • 44,500
  • 61
  • 101
  • 156
  • I found out the 128 is the height of the navbar which comes from the masterpage. The rest of the page is not included in the height of the body tag. My question is why doesn't the body tag's height include the height of all the elements which are in the body tag? – Tony_Henrich Aug 09 '13 at 18:51
  • @Tony_Henrich It should unless the elements are removed from the layout flow of the page (e.g. absolutely positioned, floated, etc.) – rink.attendant.6 Aug 09 '13 at 18:52
1

Does your body tag expand to fill the window? If there isn't enough content to force it to be as tall as the browser's height, you're likely to get back a much smaller value than expected. Try hovering over the body tag in Firebug/Chrome Tools and it should highlight the amount of space it's taking up.

Alternatively you could see if offsetHeight returns different results.

callmehiphop
  • 636
  • 5
  • 10