Question

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

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;

Answer 2

将此添加到#parent CSS：

overflow: scroll;

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

Answer 3

如果您始终想要显示滚动条，则答案是 - 如其他响应中所述 - 将overflow-y: scroll;添加到CSS。

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

height: 180px;
overflow-y: auto;

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

Answer 4

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

height: 80%;
top: 15%;

这将使它始终为父对象高度的80％，从底部有5％的边距，以及从标题顶部可以适合的15％的边距。

CSS强制子元素适合父元素

4 个答案: