JavaScript - Get Browser Height

Question

Hi,

I am looking for a code snippet to get the height of the viewable area within a browser window.

I had this code, however it is somewhat bugged as if the the body doesn't exceed the height the of the window then it comes back short.

document.body.clientHeight;

I have tried a couple of other things but they either return NaN or the same height as the above.

Does anyone know how to get the real height of the browsing window?

Answer 1

You'll want something like this, taken from http://www.howtocreate.co.uk/tutorials/javascript/browserwindow

function alertSize() {
  var myWidth = 0, myHeight = 0;
  if( typeof( window.innerWidth ) == 'number' ) {
    //Non-IE
    myWidth = window.innerWidth;
    myHeight = window.innerHeight;
  } else if( document.documentElement && ( document.documentElement.clientWidth || document.documentElement.clientHeight ) ) {
    //IE 6+ in 'standards compliant mode'
    myWidth = document.documentElement.clientWidth;
    myHeight = document.documentElement.clientHeight;
  } else if( document.body && ( document.body.clientWidth || document.body.clientHeight ) ) {
    //IE 4 compatible
    myWidth = document.body.clientWidth;
    myHeight = document.body.clientHeight;
  }
  window.alert( 'Width = ' + myWidth );
  window.alert( 'Height = ' + myHeight );
}

So that's innerHeight for modern browsers, documentElement.clientHeight for IE, body.clientHeight for deprecated/quirks.

Answer 2

Check this SO thread.

Answer 3

You can use the window.innerHeight