get window inner height accounting for x scroll bar height

html, javascript, jquery

Solution

According to this, `window.innerHeight` includes the height of the scrollbar. I modified your example to use `$(window).height`(new JSFiddle), which works if a newer version of jQuery is selected. I stepped into jQuery 2.0.3, and `$(window)` is equivalent to `window.document.documentElement.clientHeight`.

You might also find this discussion useful.

Problem

I need to get the window inner height of the window, taking into account the x-scroll bar. but it seems `window.innerHeight` returns the same height regardless of whether or not the `x-scroll` bar is visible. Is there another way of getting the the window height, which includes the `x-scroll` bar. This jsFiddle demonstrates that the value does not change when the scroll bar is added or removed. There should be a difference, which is equal to the height of the scroll bar. I'll put the code for it below too. Thank you. JavaScript: ``` $('#innerHeight').html(window.innerHeight); $('input').click(function () { if ($('#bar').is(':visible')) { $('#bar').hide(); $(this).val('show x-scroll bar'); $('#innerHeight').html(inner.innerHeight); } else { $('#bar').show(); $(this).val('hide x-scroll bar'); $('#innerHeight').html(window.innerHeight); } }); ``` HTML: ``` <input type="button" value="show x-scroll bar" /><br /> <div id="bar"></div> <p>inner height: <a id = "innerHeight"> px</a></p> ```

Original source