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;
}

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

Answer 1

一种可能的方法是：

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

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

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

:last-child browser support.

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/

如何将overflow-y div扩展到垂直可用空间？

2 个答案: