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.

Beggarly

Answer 1

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; 

Tungstic

I'm Adding that window.innerHeight is for IE9+ – Grapeshot

I'm successfully using this technique in a frame based page under IE 8/9/10 and Firefox as well. Thankyou – Willardwillcox

This code doesn't return the height of body or html tags. Is there any error? – Avail

The solution seems $(document).height(); window returns height of browser viewport, and document returns height of HTML document. – Avail

Answer 2

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 ]
);

Fortuitism

Misleading. Since scrollHeight gives height of an element's content, including content not visible on the screen, the code gives document height. Yet the question was to get window height. – Breathtaking

Answer 3

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

Fedora

@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 – Intercom