CSS强制让子元素适应父元素大小

Question

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

HTML 代码如下：

http://jsfiddle.net/vzaVc/

<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不指定高度能行吗？计算该属性的正确值可能很困难和繁琐（如果其他事物发生变化）。

- Stefan

Answer 1

如果您想让 #content 拥有滚动条，请添加 CSS 的 height 属性和 overflow，例如：

height: 160px;
overflow-y: scroll;

- David

---

1. 如果我不想/不能使用绝对高度，而需要相对高度（例如100%）怎么办？
2. 如果父元素定义了style="box-sizing: border-box;" 怎么办？

- GyRo

为什么CSS中的所有元素都必须是固定大小的？我不喜欢HTML布局系统，它太脆弱了。 - Jordan

Answer 2

将以下内容添加到CSS的#parent中：

overflow: scroll;

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

- Alex W

Answer 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。这是需要记住的一点。

- Roddy of the Frozen Peas

---

好的，但是我可以不指定高度吗？ - Stefan

@Stefan -- 是的，但您可以指定max-height(最大高度)。这两个高度表示滚动条应显示的大小。 max-height表示“此框可以是任何高度，直到指定的x，超过后显示滚动条”，而height(高度)仅表示该框始终具有特定高度，并且如果内容超出该高度，则添加滚动条。 - Roddy of the Frozen Peas

基本上，如果您希望无论内容有多少，始终显示滚动条，则可以不指定高度或最大高度（并使用overflow-y: scroll）。但是，如果您只想在内容溢出其容器时显示滚动条（使用overflow-y: auto），则需要指定该容器的高度（或最大高度）。 - Roddy of the Frozen Peas

Answer 4

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

height: 80%;
top: 15%;

这将使它始终为父对象高度的80％，距离底部有5％的间距，距离顶部有15％的间距，其中可以放置您的标题。

- Rorrik