homepage Welcome to WebmasterWorld Guest from
register, free tools, login, search, pro membership, help, library, announcements, recent posts, open posts,
Become a Pro Member

Home / Forums Index / Code, Content, and Presentation / CSS
Forum Library, Charter, Moderators: not2easy

CSS Forum

(non fixed) header + (scrolling) content + (non fixed) footer
how to create scrollable content with non fixed header and footer

5+ Year Member

Msg#: 3847862 posted 11:53 am on Feb 12, 2009 (gmt 0)

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 id='divContent' style='width:100%; overflow:auto; background-color:#ddffdd;'>
Scrolling content goes here.

<div id='divFooter' style='width:100%; position:relative; bottom:0px; background-color:#ddddff;'>


<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";

Help to find a css solution would be greatly appreciated.



WebmasterWorld Senior Member swa66 us a WebmasterWorld Top Contributor of All Time 10+ Year Member

Msg#: 3847862 posted 12:02 pm on Feb 12, 2009 (gmt 0)

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.


5+ Year Member

Msg#: 3847862 posted 3:52 pm on Feb 12, 2009 (gmt 0)

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.

Global Options:
 top home search open messages active posts  

Home / Forums Index / Code, Content, and Presentation / CSS
rss feed

All trademarks and copyrights held by respective owners. Member comments are owned by the poster.
Home ¦ Free Tools ¦ Terms of Service ¦ Privacy Policy ¦ Report Problem ¦ About ¦ Library ¦ Newsletter
WebmasterWorld is a Developer Shed Community owned by Jim Boykin.
© Webmaster World 1996-2014 all rights reserved