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.

Update (2006-09-05): There is an updated version of this technique described in CSS Frames v2, full-height.

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.

That’s it. Naaah, just kidding. 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:

html {
    overflow:hidden;
}

body {
    height:100%;
    overflow:auto;
}

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.

Donec sodales consectetuer nunc. Aenean nec augue. Curabitur commodo, felis at tristique venenatis, nunc pede luctus risus, quis eleifend tellus mauris eu nisl. Vivamus varius dictum tellus. Nam ornare sem ornare justo. Praesent eget magna ut erat ullamcorper adipiscing. Suspendisse potenti. Donec lorem. Sed in velit. Maecenas molestie pharetra lacus. Donec in velit. In metus tortor, elementum in, porta vitae, posuere eu, purus. Quisque quis est. Nunc odio nibh, aliquam eget, ultrices quis, dignissim sit amet, augue. Mauris vitae turpis eget ligula porttitor nonummy. Etiam pulvinar bibendum tellus. Nam nulla nisl, elementum nec, posuere eget, dignissim vel, dolor.

Quisque sit amet nisl at velit porta tempus. Suspendisse potenti. Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Quisque feugiat auctor urna. Vivamus tincidunt pede eu tortor dictum sagittis. Nullam porta ultricies sapien. Proin eleifend, lacus eu ultricies bibendum, tellus mauris lobortis purus, quis tincidunt dolor lacus eu ante. Duis vulputate dictum lacus. In eros. Proin diam odio, sollicitudin nec, laoreet non, facilisis ut, arcu. Ut dictum. Phasellus lectus elit, convallis ac, gravida sed, vehicula aliquam, sem. Suspendisse elit. In fermentum. Aenean fermentum iaculis velit. In nec tellus. Fusce nec lacus ut turpis tempor semper. Etiam mattis venenatis leo. Class aptent taciti sociosqu ad litora torquent per conubia nostra, per inceptos hymenaeos.

Ut in magna. Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Sed adipiscing. Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Vestibulum erat diam, gravida ut, aliquam non, interdum faucibus, diam. Quisque lacinia nunc nec neque venenatis cursus. Donec pretium porta ligula. In nibh nibh, sollicitudin quis, euismod at, hendrerit eu, magna. Vestibulum molestie enim vitae massa. Integer vel massa ac eros vestibulum venenatis. Phasellus augue.

Vestibulum vitae orci. Suspendisse et nisl. Ut consequat suscipit libero. Vestibulum id libero. Integer ut enim in sem porta hendrerit. Sed a turpis sed neque blandit mollis. Quisque non ante. Donec arcu lacus, accumsan ac, porttitor id, commodo eget, odio. Curabitur sed nulla id sem mattis pellentesque. Nullam suscipit accumsan nibh. Vestibulum ante ipsum primis in faucibus orci luctus et ultrices posuere cubilia Curae; Sed velit. Sed elit.

Donec sodales consectetuer nunc. Aenean nec augue. Curabitur commodo, felis at tristique venenatis, nunc pede luctus risus, quis eleifend tellus mauris eu nisl. Vivamus varius dictum tellus. Nam ornare sem ornare justo. Praesent eget magna ut erat ullamcorper adipiscing. Suspendisse potenti. Donec lorem. Sed in velit. Maecenas molestie pharetra lacus. Donec in velit. In metus tortor, elementum in, porta vitae, posuere eu, purus. Quisque quis est. Nunc odio nibh, aliquam eget, ultrices quis, dignissim sit amet, augue. Mauris vitae turpis eget ligula porttitor nonummy. Etiam pulvinar bibendum tellus. Nam nulla nisl, elementum nec, posuere eget, dignissim vel, dolor.