Question

My definition of “viewport” is everything between the browser’s borders (visible area + scrollbar)

http://xirc.chez.com/ie7.html

As you can see, I tried:

• document.body VS document.documentElement
• scroll* client* offset*
• getBoundingClientRect()
• html { 100% }
• body { 100% }

The Internet Explorer 7 bug per say is that offset* and getBoundingClientRect() do not include the scrollbar

Answer 1

Hide the scrollbar, get the width/height in the next line of code and show the scrollbar again.

// Hide scrollbars
document.body.style.overflow = "hidden";
// Get width/height
var width = document.body.offsetWidth;
// Reset scrollbars before the UI repaints
document.body.style.overflow = "";

alert(width);
//-> 1600 (on my display)

This will all happen before the display gets updated, so the scrollbars won’t flicker and you’ll have the full dimensions.