css - 如何将溢出的 div 扩展到垂直可用空间？

Question

我有一个这样的布局：

<div id="container">
    <div id="A"></div>
    <div id="B"></div>
    <div id="C"></div>
</div>

这是（不完整的）CSS：

#container {
    height: 400px;
    background: red;    
}

#A {
    height: 50px;
    background: yellow;
}

#B {
    height: 300px;
    background: blue;
    overflow-y: auto;    
}

#C {
    height: 50px;
    background: yellow;
}

所以 AB 和 C 应该堆叠在一起，B 应该填满 A 和 C 之间的剩余空间，如果内容太多显示滚动条。
我的问题是有时 C可能会丢失，我怎样才能让 B 动态扩展以占用它的空间？

Answer 1

一种可能的方法是：

#B:last-child {
    height: 350px;
}​

http://jsfiddle.net/thirtydot/7Bqkb/1/

因此，如果#B是最后一个孩子，请手动将高度设置为正确的值。

:last-child浏览器支持。

Answer 2

另一种方法是使用~选择器：

#B {
    height: 350px;
    background: blue;
    overflow-y: auto;    
}
#C~#B {
    height: 300px;
}

http://jsfiddle.net/VtWAY/2

应该有 IE7+ 支持http://reference.sitepoint.com/css/generalsiblingselector

编辑：仅当您还在 html 中交换 B 和 C 时才有效。http://jsfiddle.net/VtWAY/4/