Tricky box layout with sticky footer and flexible heights - html

Question

I am working on a layout that is placed into a wrapper with a fixed height and contains three inner containers.
The first container (header) should be placed on top within the wrapper and is flexible in it's height.
The second container (content) is flexible in it's height as well and need to overflow if the available space is not sufficient (overflow-y: auto).
The third container (footer) also has an unknown height and needs to be placed at the bottom of the wrapper at any time.
<div id="wrapper">
<div id="header">
<span>
some unknown content that is placed at the top of the wrapper
</span>
</div>
<div id="content">
<span>
some more unknown content and within here we want
to enable vertical scrolling if necessary
</span>
</div>
<div id="footer">
<span>
again unknown content that should be placed at the bottom of
the wrapper at any time
</span>
</div>
</div>
The options I have ruled out so far:
absolute positioning of the footer within the relative positioned wrapper: doesn't work in this case since we don't know the footer's height
flexbox model: not possible since I need to support IE8+
table: the content row doesn't overflow, the complete table would overflow and the footer would be positioned outside of the wrapper
table with the content td element's position set to relative and including a div element with position set to absolute (containing the actual content): seems to fix the overflow issue in most browsers, but e.g. in IE9 the content div (with height set to 100%) results in a height of 0
Is there any other option without using Javascript that might work here?

Answer 1

It took a while but I believe this is it, I adapted it from my answer to another question. The .inner div must have height:100% but anything inside it should be able to be modified however you want.
http://jsfiddle.net/Z4K7J/2/
.left {
border:1px solid orange;
width:200px;
height:300px;
display:table;
}
.top {
display:table-row;
}
.middle {
display:table-row;
height:100%;
}
.middle .inner {
background-color:red;
height:100%;
overflow-y:auto;
}
.bottom {
display:table-row;
}