Best Way to Handle Multiple Scrolling Columns

Question

I am in the process of developing a web application that consists visually of a header above a body containing four columns of variable-height content. The design gods have decreed it to be fixed height, mainly because each of the columns can potentially get very long, and so (being designers) they are wanting iframes with independent scrollbars.

Four (potential) scrollbars are bad enough, but if the overall page height is fixed higher than the browser window then it'll end up with five! The 'normal' solution in a case like this of course is to fix the overall page height at something like 700 pixels to give it the 'best chance' of fitting vertically, but I don't want to do that for various reasons which I'd hope would be obvious.

So my question is: What would be the best way to have a body container that fills the available (vertical space) with each of the columns doing the same thing? Is it even practical/possible? Bonus question: Can I reliably use the CSS overflow property for the columns or do I need nasty iframes? I have lots of CSS experience, but next to none with using percentage dimensions (especially when combined with pixel dimensions as I'll need for the header). Also, this must be standards-compliant and backwards-compatible to IE6.

TIA.

EDIT: I'm not looking for a CSS layout solution per se, my problem is how to accommodate the need for each column to be the maximum height possible within the body container and scrollable, without fixing the height of the body in pixels - unless I absolutely need to.

Answer 1

Are you talking of something like this?

<div id="head"></div>
<div id="body">
  <div id="col1"></div>
  <div id="col2"></div>
  <div id="col3"></div>
  <div id="col4"></div>
</div>

The CSS

#body { position: absolute; top: 60px /* height of the header */; bottom: 0px; width: 100%;  }
#body div { position: absolute; top:0; bottom:0 ;width: 25% }

This may not work in IE6, for which you would have to use JavaScript:

window.onResize = function () {
    // Calculate the height of the body, substract the height of the head and apply to all columns
}

Answer 2

In response to your second question, just set the height property in CSS to ensure that the content never gets bigger than what you require. You can use overflow-y: scroll (not valid CSS but works) to force a scrollbar on an element.

Answer 3

I have tried various permutations of DIV elements nested within each other, one set to height:100% and the other padding:60px and I can't work out a way to get the inner one to have effective height 100%-60px. The problem is that percentage heights refer to the height attribute of the containing element, not the height minus margins and padding. Sigh.

I must say I wish that CSS allowed one to express heights as a sum (or difference) of percentage, font-relative, and pixel units (as in

width: 12em - 2px;
border: 1px solid #FED; /* Total width including border is 12em exactly */

or

width: 25% - 1em;
margin: 1.25em 1em;

and so on, like TeX with its fil units).

I think your best bet is probably to have some JavaScript that examines the height of the banner and subtracts it from the height of the viewport, then sets the height of the box containing the columns appropriately. You would then find out what size screen the designer blokes use and set the hard-wired default value in the CSS file to suit their displays.

Answer 4

I'm pretty sure this does exactly what you need: Liquid 4 column layout with fixed height banner and footer

No iframes, no java script, and each column automatically fills the available height.