Home/ Questions/Q 3950600
In Process

The Archive Base Latest Questions

Editorial Team
  • 0
Asked: 2026-05-20T01:37:50+00:00

Sorry guys, it’s another CSS height 100% (sortof) question… I have a layout like

  • 0

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.

Share

Leave an answer

You must login to add an answer.

Need An Account,

1 Answer

  1. Editorial Team

    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.

    • 0