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

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.