Make a div fill the remaining dynamic height and scroll without javascript

Question

I have a document structure that maintains the header at the top of the page and the footer at the bottom. It's working well as long as the content in the middle is less than the height of the window. If the content is too long, the footer gets pushed further down the page and a full body scrollbar is displayed. How can I get the scrollbar to be limited to the content DIV.

Note that the content of the header and footer are not fixed so I don't know the height of those elements and can't set the top position of the content element as a fixed value. I've added a show/hide feature in the example to demonstrate this.

I'm trying to resolve this in pure CSS (avoiding Javascript). I know that using javascript, I could monitor changes to window size and element visibility, I could calculate the height of the header and footer and set fixed dimensions to the content element. But is there a non-javascript solution?

http://jsfiddle.net/sA5fD/1/

html { height: 100%; }
body {      
    padding:0 0;
    margin:0 0;
    height: 100%;
}
#main {
    display:table;
    height:100%;
    width:100%;
}
#header, #footer {
    display:table-row;
    background:#88f;
}
#more {
    display: none;
}
#content {
    display:table-row;
    height:100%;
    background:#8f8;
}

It should work for all modern browsers, desktop, tablets and mobiles. For old browsers, a full body scrollbar would be ok.

Solution

If you add two wrap blocks:

<div id="content">
  <div id="content-scroll-wrap">
    <div id="content-scroll">
      content...

Then use CSS:

#content-scroll-wrap {
    position: relative;
    height: 100%;
}
#content-scroll {
    position: absolute;
    top: 0; bottom: 0;
    left: 0; right: 0;
    overflow: auto;
}

http://jsfiddle.net/sA5fD/8/

Don't know about support in old browsers. IEs might need some fixes.

Comments

[Rothrock]

Doesn't work in IE 8 or 9. Anybody know a fix that won't break the rest of the browsers?