These are two iframes with width 350 and height 300. The html element background color is #AFB8BC, the body has #DDE2E4.

backwards compatible mode

strict mode

When Internet Explorer is in compatibility mode, the body element is used as the canvas. This means the body will be just as big as the viewport, and get scrollbars when there is a lot of content. When the browser renders in a strict way, the html element is used as the canvas, and the size of the body element is determined only by the inline content that it has. The clientWidth/Height properties will give you the size of an element without its border, margin or scrollbar. This is what we are looking for when we want to find the available space in the viewport.

What seems like a bug, but could be useful, is that in Mozilla 1.0 the body is not used as the canvas, but its clientWidth/Height properties give the viewport width and height (without scrollbars) anyway.