Best way to handle multiple scroll columns

Question

I am developing a web application that visually displays a title above a body containing four columns of variable-height content. The design gods indicated that this is a fixed height, mainly because each of the columns can become very long, and therefore (as designers) they want to have an iframe with independent scrollbars.

Four (potential) scrollbars are bad enough, but if the overall page height is fixed higher than in the browser window, then in the end it will have five! Of course, the “normal” solution in this case should fix the total page height by about 700 pixels to give it the “best chance” for vertical installation, but I don’t want to do this for various reasons, which I hope will 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 columns or do I need nasty frames? I have a lot of experience with CSS, but there are no percentage sizes next to them (especially in combination with the pixel sizes I need for the title). In addition, it should be standards compliant and backwards compatible with IE6.

TIA.

EDIT: I'm not looking for a CSS layout solution as such, my problem is how to account for the need for each column to be the maximum possible height inside the body container and scroll without fixing the height of the body in pixels - if I don't need to.

Answer 1

I am sure that this is exactly what you need: Layout Liquid 4 with a fixed banner height and footer

There is no iframe, no java script, and each column automatically fills the available height.

Answer 2

Are you talking about something like that?

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

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 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 3

In response to your second question, simply set the height property in CSS so that the content never gets bigger than you need. You can use overflow-y: scroll (invalid CSS, but works) to force the scroll bar on the element.

Answer 4

I tried various permutations of DIV elements nested within each other, one of which is set to height:100% , and the other padding:60px , and I cannot decide how to get the inside to have an effective height of 100% -60px. The problem is that the percentage height refers to the height attribute of the containing element, and not to the height value minus margins and padding. Sigh.

I have to say that I would like CSS to express the heights as the sum (or difference) of percentage, relative fonts and pixels (as in

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

or

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

etc., like TeX with its file 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, and then sets the height of the field containing the columns. Then you will find out what screen size the designer uses and set the default value in the wire file in the CSS file.