AlexC AlexC - 1 month ago 1722
CSS Question

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.

Answer Source

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.