CSS 强制子元素适应父元素答案

【问题标题】：CSS force child element to fit into parent elementCSS 强制子元素适应父元素
【发布时间】：2012-07-03 03:04:42
【问题描述】：

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

【问题讨论】：

标签： css height overflow

【解决方案1】：

如果您希望 #content 有滚动条，请添加 CSS height 属性和 overflow，例如

height: 160px;
overflow-y: scroll;

【讨论】：

1.如果我不想/不能使用绝对高度但需要相对高度（例如 100%）怎么办 2. 如果父元素定义为 style="box-sizing:border-box;" 怎么办？ ?
为什么 CSS 中的所有内容都必须是固定大小。我不喜欢 HTML 布局系统。太脆了。

【解决方案2】：

将此添加到#parent CSS：

overflow: scroll;

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

【讨论】：

【解决方案3】：

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

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

height: 180px;
overflow-y: auto;

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

【讨论】：

好的，但是我可以不指定高度就离开吗？
@Stefan -- 是的，但您可以指定 max-height。这两个高度表示滚动条应显示的大小。 max-height 会说“这个盒子可以是任何高度，直到这个指定的 x，超过它显示一个滚动条”，而只是 height 表示盒子总是那个特定的高度，滚动条是只是在内容超出此范围时添加。
本质上，如果你总是希望滚动条可见，不管有多少内容，你可以在不指定高度或最大高度的情况下离开（并使用overflow-y: scroll。）但如果你只如果内容溢出其容器（使用overflow-y: auto），想要显示滚动条，您需要指定该容器的高度（或最大高度）。

【解决方案4】：

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

height: 80%;
top: 15%;

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

【讨论】：