Get the window height

Question

This is frustrating me. It should be something really simple but I can't get it to work in IE. I want to get the height of the current window: Not the scroll height, not the document height, but the actual window height. I've tried window.innerHeight which returns undefined and document.documentElement.clientHeight which gives the scroll height.

score 91 · Accepted Answer · edited Jul 16 '18 at 21:24

91

For current browsers

window.innerHeight

For IE 8 and lower, use

document.documentElement.offsetHeight;

If you need older browsers, use:

var height = "innerHeight" in window 
               ? window.innerHeight
               : document.documentElement.offsetHeight;

edited Jul 16 '18 at 21:24

mikemaccana

110,530
99
389
494

answered Jun 10 '10 at 08:25

Andy E

338,112
86
474
445

I'm Adding that `window.innerHeight` is for IE9+ – vsync Aug 13 '14 at 10:12
I'm successfully using this technique in a frame based page under IE 8/9/10 and Firefox as well. Thankyou – Marco Bettiol Aug 26 '14 at 07:21
This code doesn't return the height of body or html tags. Is there any error? – horse Sep 08 '16 at 19:33
The solution seems $(document).height(); window returns height of browser viewport, and document returns height of HTML document. – horse Sep 08 '16 at 19:44

score 5 · Answer 2 · answered Sep 24 '13 at 12:21

I'm using:

doc = document;
var theHeight = Math.max(
    doc.body.scrollHeight, doc.documentElement.scrollHeight,
    doc.body.offsetHeight, doc.documentElement.offsetHeight,
    doc.body.clientHeight, doc.documentElement.clientHeight
);

Found it here: Get document height (cross-browser) - James Padolsey

And also found that jQuery is doing the same thing:

// Either scroll[Width/Height] or offset[Width/Height] or client[Width/Height], whichever is greatest
// unfortunately, this causes bug #3838 in IE6/8 only, but there is currently no good, small way to fix it.
return Math.max(
  elem.body[ "scroll" + name ], doc[ "scroll" + name ],
  elem.body[ "offset" + name ], doc[ "offset" + name ],
  doc[ "client" + name ]
);

Misleading. Since `scrollHeight` gives [height of an element's content, including content not visible on the screen](https://developer.mozilla.org/en-US/docs/Web/API/Element/scrollHeight), the code gives **document height**. Yet the question was to get **window height**. — Lightman, Jul 23 '16 at 07:48

pakore · Answer 3 · 2010-06-10T08:24:30.567

~~http://www.javascripter.net/faq/browserw.htm~~

Note that the code that uses document.body.offsetWidth and document.body.offsetHeight must be executed after the browser has parsed the tag.

Update: Try this

<script type="text/javascript">
<!--

 var viewportwidth;
 var viewportheight;

 // the more standards compliant browsers (mozilla/netscape/opera/IE7) use window.innerWidth and window.innerHeight

 if (typeof window.innerWidth != 'undefined')
 {
      viewportwidth = window.innerWidth,
      viewportheight = window.innerHeight
 }

// IE6 in standards compliant mode (i.e. with a valid doctype as the first line in the document)

 else if (typeof document.documentElement != 'undefined'
     && typeof document.documentElement.clientWidth !=
     'undefined' && document.documentElement.clientWidth != 0)
 {
       viewportwidth = document.documentElement.clientWidth,
       viewportheight = document.documentElement.clientHeight
 }

 // older versions of IE

 else
 {
       viewportwidth = document.getElementsByTagName('body')[0].clientWidth,
       viewportheight = document.getElementsByTagName('body')[0].clientHeight
 }
document.write('<p>Your viewport width is '+viewportwidth+'x'+viewportheight+'</p>');
//-->
</script>

Found here

@YO Momma : you can used following code `myWidth = screen.availWidth; myHeight =screen.availHeight;` this works in all browser. one thing is that window.innerheight does not support in IE — Raje, Aug 25 '11 at 09:05

Get the window height

3 Answers3

Linked