User agents for continuous media
generally offer users a viewport (a window or other viewing area on the screen) through
which users consult a document. User agents may change the document's layout
when the viewport is resized (see the initial containing block).
When the viewport is smaller than the
area of the canvas on which the document is rendered, the user agent should
offer a scrolling mechanism. There is at most one viewport per canvas, but user agents may render to more than one canvas
(i.e., provide different views of the same document).
The initial containing block is always sized to the viewport. In
desktop browsers, this is the visible
area in the browser window. It is also always at position (0,0) relative to the entire document. Here’s a
picture illustrating where the initial containing block is positioned for a
document. The black bordered box
and the grey box represents the entire
If the document is scrolled, then the
initial containing block will be moved offscreen. It is always at the top of the document and sized to the
viewport. One area of confusion that people
often have with the initial containing block is that they expect it to
somehow be outside the document and part of the viewport.
Here is the detailed containing block specification in CSS2.1.
RenderView, and the grey box represents the entire document.