CSS: Make one central div's height expand to fill what's left in a FIXED-HEIGHT container

Question

Sorry guys, it's another CSS height "100%" (sortof) question...

I have a layout like this:

 ---------------.   
|Containing div |   Containing div's height is FIXED
| .-----------. |     (say 400px for simplicity)
| |Inner div1 | |   Inner div1 has height fixed (say 50px)
| '-----------' |   Inner div3 has static-but-unknown content, 
| .-----------. |     height not known at render time
| |Inner      | |   Inner Variable Div should expand to the rest
| |Variable   | |     of the space - i.e. I want to eliminate
| |Div        | |     the "blank space"
| '-----------' |
| .-----------. |
| |Inner div3 | |
| |with fixed | |
| |usercontent| |
| '-----------' |
|  blank space  |
'---------------'

That's: one Container Div with a FIXED HEIGHT (say 400px). Several divs inside it, vertically stacked: div1, Variable Div, div3. At least one of them (div3) has static-but-unknown content, so I can't just slap pixel calculated heights on everything. Let's say for the sake of argument that div1+div3 WILL fit within Container Div.

I want to make Variable Div expand to fill the rest of the height within Container Div's 400px. But I can't specify its height as 100% because that ignores the slice that the other inner divs need, and overflows the Container Div.

This is different to most CSS-height-tagged questions on here, but CSS div height won't expand and Fixed parent container height, child to expand/be-limited-to parent container might be related.

I'm after a pure CSS solution if at all possible. I'm okay with it only working in FF/Webkit/very recent IE.

Answer 1

This answer will work only if you don't need to put a background on the "Inner Variable Div":

Live Demo

CSS:

#container {
    background: #ccc;
    height: 400px;
    width: 300px;

    position: relative
}
#div1 {
    background: #999;
    height: 50px
}

#content {
    background: #ddd;
    overflow: hidden
}
#div3 {
    background: #999;
    position: absolute;
    bottom: 0;
    width: 100%
}

HTML:

<div id="container">
    <div id="div1">I'm 50px.</div>

    <div id="content">I'm variable.<br />I'm variable.<br />I'm variable.<br />I'm variable.<br />I'm variable.<br />I'm variable.<br />I'm variable.<br /></div>

    <div id="div3">I'm unknown.<br />A<br />B<br />C</div>
</div>