This template divides the window content into three areas. The green header, white content and red footer. This template allows to control how the content will scroll. The content is resized so that the header is always on top of the window, the footer is on the bottom and the content fills our the area in between. This way it is possible to control scrolling of the content and still have header and footer visible.
In Internet Explorer even if the content is resized to fit between header and footer, the scrollbar is normally always visible. This layout takes care of that glitch by allowing to set scrollbars attribute to false so that the the scrollbar in Internet Explorer will be hidden.
How the content behaves is controlled by setting overflow attribute on the bodycontent element. If it is set to hidden, no scrollbar will be ever displayed. If it is set to auto, vertical scrollbar will be displayed if the content is too small to fit to the window.
For this test, there should be scrollbar only if the content is too small to fit into area between header and footer. The scrollbar will start belowe header and will end above footer. The header should be always on the top of the window and the footer always on the bottom. If the window is large enough, you can see at the end of the content area text 'This is the last line'. If the window is too small this last line is not visible but you can scroll to it. Even if you scroll, the header and footer should not move.
This page should fully validate using W3C HTML and CSS validator with exception of onresize attribute on body.
The following snippet shows you how easy it is to create HTML page using the basic website page layout.