I've been trying for a really long time to find a good, standards-happy way to get the following layout:

  • Header with fixed height, stuck at the top of the viewport
  • Footer with fixed height, stuck at the bottom of the viewport
  • Liquid content box between them, which gets its own local scrollbar when content exceeds the available space between the header and the footer

With the old quirks mode box model (or with Firefox set up with -moz-box-sizing: border-box, this wasn't that hard. I'd position the content absolutely, with height set to 100% and top and bottom padding to match the header and footer. Then I'd drop in the header and footer, also absolutely positioned. Because the 100% height (in that box model) would apply to the overall content box — including the padding — things would just work. Even in IE6.

Of course, in the dark ages, one would just drop in a table, with the top row being the header, the bottom row being the footer, and the central row being the content. A few hacks on the row sizes etc. and it'd just work. I prefer not to think about that.

Here is an example that works in Firefox and Chrome (but IE8 apparently gets the MS version of the "box-sizing" attribute wrong, so it doesn't work there, and of course not in IE6 or 7).

With the "true" W3C box mode, getting that central content box to scroll like that is pretty hard; in fact I haven't come up with a way to do it that works in the old browsers. In the "good" browsers, what works is to position the content box absolutely, without giving it an explicit height and pinning the "top" and "bottom" attributes to match the header and footer sizes. IE doesn't get that right in ways I don't exactly remember; I think in fact that IE6 and 7 get it wrong in distinct ways.

Here is a compromise layout that does work. It's less desirable to me, but it's the best I can do. That one works by padding the content with dummy blocks to match the header and footer sizes, and then doing the scrolling in the outer box. Thus the scrollbar shows up such that it appears to include the header and footer (which, I admit, has a certain charm to it).

There are lots of example layouts on the web (LOTS), and various tricks for fixing the footer to the bottom of the window, but all the ones I've found let it scroll off the main page when the content gets long.

3 answers

o.k.w 2355
2
points

A very tricky one indeed. Box-sizing for IE8 like you said somewhat does not behave as expected.

I've tried the pinning the top and bottom method that you mentioned and it works for IE8:

#page-content {
    position: absolute;
    background-color: #eee;
    /* add these */
    top: 140px;
    left: 0;
    right: 0;
    bottom: 60px;
}

Though sadly, it is kind of a step back but it works for FF, Webkit, Opera too. To maintain usage of the box-sizing properties, you might want to use IE conditional comments to incorporate the one above for IE8 as well as the old boxing styles for IE6/7.

Answered almost 7 years ago by o.k.w
  • OK, thanks; it's good to know that IE8 can be made to do it properly. However, IE6 at least (I can't remember what IE7's deal is) won't work without a Javascript crutch, which I'd rather avoid. (At least, I'm pretty sure it won't.) Mike McNally almost 7 years ago
  • What would that JavaScript crutch be? Christopher Parker over 6 years ago
Mottie 1134
2
points

I think people get too fixated on never using tables. I say if it works and it's easy to do, go for it. I don't know why designers are so masochistic and unwavering on the idea that "tables are for tabular data only". I wouldn't call it going back to the "dark ages".

That being said, I joined in your masochism and put together this demo. I haven't checked it in IE6 or IE7, but it seems to work in IE8. :)

Answered almost 7 years ago by Mottie
  • Thanks. I understand what you're saying about tables, but my preference is to avoid having to live with them. Your solution seems to be workable for IE, but unfortunately it doesn't satisfy the requirement of having the header and footer be fixed height (they'll contain graphics, so percentage heights won't work out). Still, I really do appreciate the effort, and your answer may help somebody who's got less restrictive needs than I do. Mike McNally almost 7 years ago
0
points

If your client/target uses IE6 and tables work the best, use tables. At the end of the day, it's really about customer satisfaction, and maintaining your mental health!

Answered almost 7 years ago by tahdhaze09
  • Does nobody care about screen readers? Don't use tables for layout! Christopher Parker over 6 years ago