Header and footer tied to top and bottom of screen
View in Firefox, IE6 and IE7 to see the differences at different screen resolutions.
Some of the examples are provided just to show problems, others show solutions that work in Firefox, IE6 and IE7. Use the example that suits you.
problems
warning: works in some situations or needs care to display as you wish
OK in Firefox, IE6 and IE7
This example is based on CSS Frames from 456 Berea Street website here.
1 This works in Firefox and IE6 but please take note of the comments below taken from the 456 Berea Street website.
IE6 does not provide a scrollbar when viewed with a screen resolution less than 720px (the width of the containing div).
Background
One of the arguments for using frames has always been that they allow you to keep parts of the layout on-screen at all times. This can be emulated with CSS, as described here. This results in much better usability than normal frames, but there are still some potential problems you need to be aware of. For a longer discussion on frames and usability, read my article Who framed the web: Frames and Usability.
How does this work?
The document consists of three main blocks: headerwrap, middlewrap and footerwrap. headerwrap and footerwrap have fixed positions; headerwrap at the top and footerwrap at the bottom of the viewport. middlewrap has padding-top and padding-bottom to match the heights of headerwrap and footerwrap.
To center the content horizontally, the contents of each of the main blocks has its left and right margins set to auto.
View source on this page to see the HTML and CSS.
Of course some browser bugs and quirks have to be accounted for. The biggest problem is IE/Win’s lack of support for position:fixed. To get around this I’m using conditional comments to load an extra stylesheet if the browser is IE6:
<pre>html { overflow:hidden; }
body { height:100%; overflow:auto; }</pre>
From what I have been able to find, this will not work in older versions of IE. There are JavaScript hacks that can be used, but I think it’s better to keep the code clean.
In browsers that do not support position:fixed the whole page will scroll, which is perfectly acceptable to me. This is done by first setting the header and footer to be position:absolute, and then using a child selector to send position:fixed only to the browsers that can handle it.
I have tested this technique and found it to work in the following browsers:
- Mozilla 1.4+/Mac OS X
- Mozilla Firebird 0.61/Win
- Safari 1.0/Mac OS X
- IE6/Win
- IE5.2/Mac OS X
- OmniWeb 4.5/Mac OS X
- Opera 7.11/Win
In Netscape 4 browsers and IE5/Win, the whole page scrolls instead of just the middle part.
This example is inspired by Simon Jessey’s fixed sidebars and Eric Bednarz’s position:fixed; fixed for IE5(+)/win.
Notes
View/Source or View/Page Source in browser menu to see all xhtml code. All the styles are in the head.
Remember that when a Doctype is included above the head before the html tag (as it should be) then the overall width of a div is its defined width plus borders, margins and padding widths.