CSS:使一个中央 div 的高度扩展以填充 FIXED-HEIGHT 容器中剩余的内容

Question

抱歉，这是另一个 CSS 高度“100%”(有点)的问题...

我有这样的布局:

 ---------------.   
|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  |
'---------------'

那是:一个具有固定高度(例如 400 像素)的容器 Div。里面有几个div，垂直堆叠:div1，Variable Div，div3。至少其中一个 (div3) 具有静态但未知的内容，因此我不能只在所有内容上使用像素计算高度。让我们假设 div1+div3 将适合 Container Div。

我想让 Variable Div 扩展以填充 Container Div 的 400px 内的其余高度。但我不能将其高度指定为 100%，因为这会忽略其他内部 div 需要的切片，并溢出 Container Div。

这与此处的大多数 CSS 高度标记问题不同，但是 CSS div height won't expand和 Fixed parent container height, child to expand/be-limited-to parent container可能是相关的。

如果可能的话，我寻求纯 CSS 解决方案。我同意它只能在 FF/Webkit/最近的 IE 中工作。

Answer 1

仅当您不需要在“内部变量 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>