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

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.

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>

This is made complex at least in my mind by div3 having a variable height.

Similar solutions I've used usually have the final div being of a static height and then using a combination of height 100% and bottom padding equal to the height of the final div to allow for the central content to expand as appropriate.

You could use this technique on a div that wraps inner variable div and inner div3 and then position absolute bottom div3 to that div (with the wrapping div being positon relative)- but then I believe that resizing the browser / small resolutions or content combos could cause div3 to overlap inner variable div or vice-versa; I think it would at least get you closer to the answer however.

This is the best solution I could come up with, unfortunately using a dash of jQuery.

http://jsfiddle.net/G7fys/1/

There didn't seem to be a way to do it in pure CSS and still have different backgrounds on all the elements. So I resorted to using a little javascript.

Those curious about the application: I'm using CSS to create mockups of Magic: the Gathering cards. In this case, I'm making tokens: compare http://www.magicmultiverse.net/cards/52371 and http://www.magicmultiverse.net/cards/44771 with the official equivalents. I wanted to have the text box sized only as big as it needed to be. And I'm going to be allowing art behind the in the big curved box. So Javascript it was.