Three row fluid scrolling center CSS layout

Question

I am currently building the HTML and CSS for an application I am developing.

This application has a fixed height header, a fixed height footer and a middle area that should take up the rest of the space.

The problem is that I want the header and the footer to stay fixed in place the entire time, while the content scrolls if it becomes too big.

I've been able to get the content scrollable with the header and footer fixed in place, but this uses a push div which makes it so the scrollbar disappears behind the header, another option makes it disappear behind the footer.. I am having a hard time getting a div to scroll when it exceeds the max size without giving it a 100% height.

Here is what I have so far:

http://jsfiddle.net/7gmpu/

Is this possible with pure CSS? Or do I have to calculate the window height with javascript every time it resizes?

Is my 'solution' even close?

Answer 1

If you want to have your elements fixed, you have to use CSS positioning. Your current solution is already close, however it's a little bit complicated.

Say you want to have three blocks:

HEADER
CONTENT
FOOTER

the most natural way is to put them all in a container (not needed if your website consists of only these 3 elements) and position them absolute. For HEADER top is 0, for FOOTER bottom is 0. In CONTENT you have to adjust top and bottom to ensure that it will be the height of your footer/header.

So if your using a #wrapper, #header, #content and #footer, this is the code you'll need:

#wrapper{position:absolute; top:0;bottom:0;width:100%;}
#header, #footer, #content{position:absolute; width:100%;}
#header{top:0; background-color:#faa;height:50px;}
#content{top:50px;bottom:150px; overflow:auto;}
#footer{bottom:0px; background-color:#afa; height:150px}

Demo

EDIT: Your updated demo. Don't specify a height value if you want to use fixed positioning. Use an implicit height instead by defining top and bottom. Also use overflow:auto for scrollbars. I did the following changes:

#mid {
    background:    #222;
    /* dropped height */
    bottom:50px; /* implicit height */
    overflow:auto; /* automatical scrollbars */
    width:        100%;    
    position:    fixed;
    top:        100px;
}