JavaScript - Get Browser Height

Question

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?

Check [this SO thread](http://stackoverflow.com/questions/1248081/get-the-browser-viewport-dimensions-with-javascript). — Vinz, Jul 26 '10 at 08:40

score 81 · Answer 1 · answered Jul 26 '10 at 08:39

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.

score 48 · Answer 2 · edited Mar 15 '13 at 20:00

48

Try using jquery:

window_size = $(window).height();

edited Mar 15 '13 at 20:00

p.s.w.g

146,324
30
291
331

answered Mar 15 '13 at 19:43

Jim's Code Corner

737
6
7

score 32 · Answer 3 · answered Jul 26 '10 at 08:42

32

You can use the window.innerHeight

answered Jul 26 '10 at 08:42

Gabriele Petrioli

191,379
34
261
317

24

We don't need to support Internet Explorer :) If you must, try document.documentElement.clientHeight or using jquery instead. – honestduane Mar 31 '14 at 02:40

score 21 · Answer 4 · edited Apr 14 '15 at 21:58

21

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.

edited Apr 14 '15 at 21:58

Jim Puls

79,175
10
73
78

answered Jan 09 '14 at 17:06

techdude

1,334
20
29

1

I'm interested to know if there is a technical reason why the pattern `var width = window.innerWidth || window.clientWidth;` is not used. – Matty Balaam Oct 25 '16 at 10:11
Well the first reason is that only one of the two properties is defined, depending on the browser type used. As for why not just use the coalesce operator, technically that should be used when the items are defined, but one of them might be some false value. Chrome is smart enough to still give a value, but at least historically, Firefox would complain that the first variable doesn't exist. Not sure how it is now, but that's the reason why. – techdude Oct 25 '16 at 14:43
1

Ok, just for reference, I tested this in the latest versions of Firefox, Chrome, Safari, and IE Edge. Using coalesce on undefined variables works fine, so it looks like that issue has been fixed. So with that in mind, the only reason you would prefer using ternary statements over the coalesce form is for personal style reasons, or so you can support older browsers. Keep in mind that when this andwer was written, we had to support IE6 and FF3, and if I had to guess, I would say it was FF3 that had the issue with the coalesce syntax. – techdude Oct 25 '16 at 14:55

score 4 · Answer 5 · answered Dec 23 '14 at 00:41

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

Taufik Nurrohman · Answer 6 · 2018-06-22T15:49:08.653

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

@stuartdotnet You can always remove the DOM after get the height. — Taufik Nurrohman, Jun 22 '18 at 15:42

score 2 · Answer 7 · answered Aug 25 '14 at 20:35

2

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

document.write(winWidth, winHeight);

answered Aug 25 '14 at 20:35

FrEaKi

101
8

2

Its best to include some explanation of your answer along with any code, to give context to any future visitors to this question – Jon Egerton Aug 25 '14 at 20:59

score 1 · Answer 8 · answered Feb 10 '16 at 20:19

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

score 0 · Answer 9 · answered Jul 24 '14 at 11:56

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.

score 0 · Answer 10 · edited Nov 15 '22 at 23:31

0

JavaScript version in case if jQuery is not an option:

window.screen.availHeight

edited Nov 15 '22 at 23:31

Kirk Beard

9,569
12
43
47

answered Jul 24 '14 at 19:54

Alexander C.

1,171
4
16
29

JavaScript - Get Browser Height

10 Answers10

Linked