JavaScript - Get Browser Height

Javascript Problem Overview

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?

Javascript Solutions

Solution 1 - Javascript

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.

Solution 2 - Javascript

Try using jquery:

window_size = $(window).height();

Solution 3 - Javascript

You can use the window.innerHeight

Solution 4 - Javascript

The way that I like to do it is like this with a ternary assignment.

 var width = isNaN(window.innerWidth) ? window.clientWidth : window.innerWidth;
 var height = isNaN(window.innerHeight) ? window.clientHeight : window.innerHeight;

I might point out that, if you run this in the global context that from that point on you could use window.height and window.width.

Works on IE and other browsers as far as I know (I have only tested it on IE11).

Super clean and, if I am not mistaken, efficient.

Solution 5 - Javascript

There's a simpler way than a whole bunch of if statements. Use the or (||) operator.

function getBrowserDimensions() {
  return {
    width: (window.innerWidth || document.documentElement.clientWidth || document.body.clientWidth),
    height: (window.innerHeight || document.documentElement.clientHeight || document.body.clientHeight)
  };
}

var browser_dims = getBrowserDimensions();

alert("Width = " + browser_dims.width + "\nHeight = " + browser_dims.height);

Solution 6 - Javascript

This should works too. First create an absolute <div> element with absolute position and 100% height:

<div id="h" style="position:absolute;top:0;bottom:0;"></div>

Then, get the window height from that element via offsetHeight

var winHeight = document.getElementById('h').offsetHeight;

Update:

function getBrowserSize() {
    var div = document.createElement('div');
    div.style.position = 'absolute';
    div.style.top = 0;
    div.style.left = 0;
    div.style.width = '100%';
    div.style.height = '100%';
    document.documentElement.appendChild(div);
    var results = {
        width: div.offsetWidth,
        height: div.offsetHeight
    };
    div.parentNode.removeChild(div); // remove the `div`
    return results;
}

console.log(getBrowserSize());

Solution 7 - Javascript

var winWidth = window.screen.width;
var winHeight = window.screen.height;

document.write(winWidth, winHeight);

Solution 8 - Javascript

With JQuery you can try this $(window).innerHeight() (Works for me on Chrome, FF and IE). With bootstrap modal I used something like the following;

$('#YourModal').on('show.bs.modal', function () {
    $('.modal-body').css('height', $(window).innerHeight() * 0.7);
});

Solution 9 - Javascript

I prefer the way I just figured out... No JS... 100% HTML & CSS:

(Will center it perfectly in the middle, regardless of the content size.

HTML FILE

<html><head>
<link href="jane.css" rel="stylesheet" />
</head>
<body>
<table id="container">
<tr>
<td id="centerpiece">
123
</td></tr></table>
</body></html>

CSS FILE

#container{
	border:0;
	width:100%;
	height:100%;
}
#centerpiece{
	vertical-align:middle;
	text-align:center;
}

for centering images / div's held within the td, you may wish to try margin:auto; and specify a div dimension instead. -Though, saying that... the 'text-align' property will align much more than just a simple text element.

Solution 10 - Javascript

JavaScript version in case if jQuery is not an option.

window.screen.availHeight

Content Type	Original Author	Original Content on Stackoverflow
Question	JasonS	View Question on Stackoverflow
Solution 1 - Javascript	meder omuraliev	View Answer on Stackoverflow
Solution 2 - Javascript	Jim's Code Corner	View Answer on Stackoverflow
Solution 3 - Javascript	Gabriele Petrioli	View Answer on Stackoverflow
Solution 4 - Javascript	techdude	View Answer on Stackoverflow
Solution 5 - Javascript	Tanny O'Haley	View Answer on Stackoverflow
Solution 6 - Javascript	Taufik Nurrohman	View Answer on Stackoverflow
Solution 7 - Javascript	FrEaKi	View Answer on Stackoverflow
Solution 8 - Javascript	Mahib	View Answer on Stackoverflow
Solution 9 - Javascript	josh.thomson	View Answer on Stackoverflow
Solution 10 - Javascript	Alexander C.	View Answer on Stackoverflow