Webpage: multiple scroll areas with variable height

Question

I want to create an html page with a fixed-height header, a variable-height middle section and a fixed-height footer. The footer and header should not move while scrolling.

There are no problems so far.

But I want the midlle part to be split, so that the right column and left column have separate scrollbars and scroll independently. This is possible during overflow: scrolling as long as the parts have a fixed height. But I want them to grow and shrink with the window.

I don't bind frames, and I want to change the contents of two columns often with javascript (ajax).

What is the best way to create such a page?

Answer 1

I tested this in IE7 / 8 (not 6!) And the latest versions: Firefox, Chrome, Opera.

Live Demo (complete with boring colors)

HTML is very simple:

<div id="header">header</div> <div id="middle"> <div id="left">left</div> <div id="right">right</div> </div> <div id="footer">footer</div> 

CSS , on the other hand, is a bit more complicated:

 html, body { margin: 0; padding:0; border: 0; overflow: hidden } #header, #middle, #footer { position: absolute; width: 100% } #header { background: #777; height: 150px; top: 0 } #middle { background: #f00; top: 150px; bottom: 150px } #footer { background: #777; height: 150px; bottom: 0 } #left, #right { overflow-y: scroll } #left { background: #aaa; position: absolute; left: 0; top: 0; width: 50%; height: 100% } #right { background: #999; position: absolute; left: 50%; top: 0; float: right; width: 50%; height: 100% } 

I will explain how CSS works if you ask me.

Answer 2

Try using percentages in the div (and leave the table). For example, you can set the title to height: 20% and the two middle scroll divs to height: 70%; width: 50%; float:left; height: 70%; width: 50%; float:left; . This leaves the footer at height: 10% . Changing the contents of middle divs via ajax should not change their height. But of course, this provides a variable rather than a fixed header and footer.

Note: These figures are for illustrative purposes only. You will need to adjust them, including padding / margins that are not counted.