(non fixed) header + (scrolling) content + (non fixed) footer

how to create scrollable content with non fixed header and footer

[ghow]

I have been trying unsuccessfully with either tables or css to achieve the following three row layout:

A) the total height of all three rows is 100% of container
B) the height of the top and bottom rows is unknown and may vary at runtime
C) the height of the middle row should fill the remainder and scroll the contents if required
D) must work in IE6+ and Firefox (and preferably google chrome)
E) does not use javascript to modify style

None of the examples I have found allow for a variable size header and footer.

The effect I want can be seen in the following sample that uses javascript to emulate what I need (the resize button sets the size to what I need, the extend button changes the header size):

 <div id='divContainer' style='position: absolute; left: 150px; top: 50px; height: 200px; width: 300px; border:solid 1px blue;'>
 
 <div id='divHeader' style='width:100%; background-color:#ffdddd;'>
 Header <span id='spHead'></span>
 </div>
 
 <div id='divContent' style='width:100%; overflow:auto; background-color:#ddffdd;'>
 Scrolling content goes here.
 </div>
 
 <div id='divFooter' style='width:100%; position:relative; bottom:0px; background-color:#ddddff;'>
 Footer
 </div>
 
 </div>

 <input type='button' value='extend' onclick='document.getElementById("spHead").innerHTML += "<br/>another line";' />
 <input type='button' value='resize' onclick='setContentHeight();' />
 
 <script language="javascript" type="text/javascript">
 function setContentHeight()
 {
 document.getElementById('divContent').style.height = document.getElementById('divContainer').clientHeight - document.getElementById('divHeader').clientHeight - document.getElementById('divFooter').clientHeight + "px";
 }
 </script>

Help to find a css solution would be greatly appreciated.

[swa66]

Too many requirements for me to have any solution left.

absolute positioning can probably do most except for IE6 that'll need scripted help (e.g. IE7.js) and except for the unknown height of the header and footer that requires scripting too.

So I guess you'll need to look at if all requirements can't be met, how you wan it to degrade.

[ghow]

Just to make things harder, the divContainer is resizable :)

To put it in context, this is to be used inside a resizable popup dialog. The header will be the validation summary and the bottom will be the button/status bar area.