CSS强制子元素适应父元素

Question

如何强制子元素适应父元素，即在#content 上显示滚动条？

http://jsfiddle.net/vzaVc/

HTML:

<div id="parent">
    <div id="header">
        varied-sized header
    </div>
    <div id="content">
        the real content<br>
        this can be so long<br>
        that it doesn't fit into the parent<br>
        so this should get a scroll bar<br>
        so that the user can... scroll it down<br>
    </div>
</div>​

CSS:

#parent {
    background-color: red;
    display: inline-block;
    width: 200px;
    height: 300px;
}
#header {
    background-color: yellow;
    font-size: 32px;
    margin: 20px;
}
#content {
    background-color: green;    
    font-size: 24px;
    margin: 20px;
    overflow: auto;
}​

编辑:

我可以在不指定#content 高度的情况下离开吗？计算该属性的正确值可能既困难又麻烦(如果其他情况发生变化)。

Answer 1

如果你想让#content有一个滚动条，添加一个CSS height属性和overflow，例如

height: 160px;
overflow-y: scroll;