I am looking for a CSS-based web page template where the main content div occupies the entire height of the presentation port (minus the height of the header and footer) when its content has multiple lines. The footer should be at the bottom of the view port (instead of right below the content and instead of displaying in the middle of the viewport). The content area should be stretched vertically to hide the top of the footer. Case No. 1
In all other cases, when the content requires more than the viewing area, the footer may be located at the bottom of the web page (instead of the bottom of the viewing window) as standard web design.
A link to a specific link or sample code is evaluated. Don’t mention the template site and tell me to search. Should work at least in IE 6 and FF. If Javascript is required, this is normal if the browser does not support JS, by default it sets the footer at the bottom of the content area without breaking the layout.
Sketch for case number 1:
-------------- <-----
header area | |
-------------| |
small content| |
| viewport
| |
| |
-------------| |
footer area | |
-------------- <-----
all other cases:
-------------- <-----
header area | |
-------------| |
big content | |
| viewport
| |
| |
| |
| |
| <----
|
-------------|
footer area |
--------------
source
share