The CSS 2.1 specification states that “A percentage height on the root element is relative to the viewport.” The root element is the element at the top of the document tree, having no parent, i.e. the HTML element. The viewport is the window onto the canvas. Therefore, the following style declarations:

• html { position: relative; height: 100%; margin: 0; padding: 0; border: none }
• body { margin:0; padding: 2em; border: none; overflow: auto }

…should allow us to absolutely-position elements—such as those below—relative to the edge of the window. This simple example displays correctly in both Firefox and Internet Explorer; a more complicated example fails on IE versions 6 and previous.

Other CSS-related pages