css - 在另一个 <div> 中包含一个 <div>

Question

我试图在其父 div 中包含一个 div 的边框，我希望子 div 的溢出文本自动在子 div 上放置一个滚动条。我已经尝试了我能想到的一切，但我不知道有什么方法可以做我想做的事情。有人可以就如何尽可能高效地执行此操作向我提供一些建议吗？

Answer 1

My parent div has a percentage-defined height though

这应该不是问题，只要 parent 的高度具有有效值即可。您可以将高度或最大高度宽度设置为百分比值。

max-height，会让它一直增长直到达到最大值。

http://jsfiddle.net/E2Mfa/
例如这个样式表:

html, body, .childContainer1 {
    height:100%;
    background:#edf;
}
body, div, p {
    margin:0;
}
.parentContainer {
    height:25%;
    background:#fed;
}
.childContainer1 {
    overflow:auto;
}
.childContainer2 {
    max-height:100%;
    background:#def;
    overflow:auto;
}

如果您从 html 或正文中删除高度，它将不再起作用。 当您提供百分比高度时，它会根据其父级高度进行计算。
如果在 CSS parent 中找不到高度，则没有可计算的值。
最大高度不返回可用于计算 child 的百分比高度的值

这里使用的结构:

<div class="parentContainer">
    <div class="childContainer1">
...
    </div>
</div>
<div class="parentContainer">
    <div class="childContainer2">
...
    </div>
</div>
<div class="parentContainer">
    <div class="childContainer1">
...
    </div>
</div>
<div class="parentContainer">
    <div class="childContainer2">
...
    </div>
</div>