Question

I can get window.innerHeight on Chrome.

1, How to get this property on IE7 via pure JS?

2, How to get this property on IE7 via jQuery?

Thank you!

Answer 1

1. Pure JS is difficult; so you’ll need a script for that:

   http://andylangton.co.uk/articles/javascript/get-viewport-size-javascript/

2. jQuery on the other hand, is as simple as typing this:

   $(window).height();
   

JS Fiddle link for a live demo

Note: The window size is the size of the result section in JS Fiddle.

Update 1

I found a script that finds the scrollbar size from JQuery Dimensions should have a method to return the scrollbar size:

jQuery.getScrollBarSize = function() {
   var inner = $('<p></p>').css({
      'width':'100%',
      'height':'100%'
   });
   var outer = $('<div></div>').css({
      'position':'absolute',
      'width':'100px',
      'height':'100px',
      'top':'0',
      'left':'0',
      'visibility':'hidden',
      'overflow':'hidden'
   }).append(inner);

   $(document.body).append(outer);

   var w1 = inner.width(), h1 = inner.height();
   outer.css('overflow','scroll');
   var w2 = inner.width(), h2 = inner.height();
   if (w1 == w2 && outer[0].clientWidth) {
      w2 = outer[0].clientWidth;
   }
   if (h1 == h2 && outer[0].clientHeight) {
      h2 = outer[0].clientHeight;
   }

   outer.detach();

   return [(w1 - w2),(h1 - h2)];
};

The only problem left is it always adds the scrollbar width & height to the dimensions, regardless if there is a scrollbar or not. One solution to fix this problem is to detect when there is overflow in a web page, and at what dimension (vertical or horizontal).