An expanding middle in CSS

Question

How would I go about designing a website which has a fixed height header and footer (attached to the top and bottom of the browser window) but an expanding middle. The scroll bars would be only for the middle (orange section in diagram) so that the rest of the page would never need to scroll. I have drawn a mock-up below to explain more clearly.

Ideally it needs to be entirely implemented in CSS and HTML (no javascript fiddles!). I've got quite far with this problem but I can't force the orange section to fill up the remaining space when it isn't full(whatever it's content) and start scrolling if it overflows.

Answer 1

I think this is what you want:

Live Demo (edit)

HTML:

<div id="header">Patrick</div>
<div id="content">..</div>
<div id="footer">Beardmore</div>

CSS:

html, body {
    margin: 0;
    padding: 0;
    border: 0;
    overflow: hidden
}
#header, #content, #footer {
    position: absolute;
    left: 0;
    width: 100%
}
#header {
    top: 0;
    height: 100px;

    background: #ccc
}
#content {
    top: 100px;
    bottom: 100px;
    overflow-y: auto
}
#footer {
    bottom: 0;
    height: 100px;

    background: #ccc
}