3

如何强制子元素适合父元素，即在#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 的高度的情况下离开吗？计算该属性的正确值可能既困难又麻烦（如果其他事情发生变化）。

4

4 回答 4

2

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

height: 160px;
overflow-y: scroll;
于 2012-07-02T17:09:26.137 回答
1

将此添加到#parentCSS 中：

overflow: scroll;

或者如果您希望孩子有滚动条，请将其添加到孩子的 CSS 中。

于 2012-07-02T17:07:57.197 回答
1

如果您总是想显示滚动条，答案是——正如另一个回复中提到的——添加overflow-y: scroll;到 CSS 中。

但是，如果您只想在内容太大时显示滚动条，答案是设置绝对高度，然后使用overflow-y:auto;：

height: 180px;
overflow-y: auto;

需要注意的重要一点是，如果 overflow-x 和 overflow-y 不匹配，则应用的默认值是 auto。因此，如果您有overflow-x: hiddenand overflow-y: visible，浏览器会将其解释为overflow: auto. 只是要记住的事情。

于 2012-07-02T17:13:56.320 回答
0

为了回答编辑，我通常将子对象的高度指定为百分比，这使其成为父元素高度的百分比。

height: 80%;
top: 15%;

这将使其始终为父对象高度的 80%，距底部有 5% 的边距，距顶部有 15% 的边距，以适合您的标题。

于 2012-07-02T17:49:03.247 回答