css - 包含一个在另一个内

Question

我试图在其父 div 中包含一个 div 的边框，并且我希望子 div 的溢出文本自动在子 div 上放置一个滚动条。我已经尝试了我能想到的一切，但我不知道有一种方法可以做我想做的事情。有人可以就如何尽可能有效地做到这一点给我一些建议吗？

Answer 1

我的父 div 有一个百分比定义的高度

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

最大高度，将让它增长直到它匹配最大值。

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 或 body 中删除高度，它就不再起作用了。当您给出百分比高度时，它会从其父高度计算它。
如果在 CSS 父级中没有找到高度，则没有可计算的值。
max-height 返回没有值可用于计算孩子的百分比高度

这里使用的结构：

<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>

Answer 2

你的父 div 有绝对大小吗？如果是这样，您可以这样做：

<div style="width:100px;height:100px;">

<div style="position:absolute;overflow:auto;border:solid black 1px;">My Content</div>

</div>

Answer 3

检查这个（不确定你是否想要这样的东西），

<div class="outer-div">
    <div class="inner-div">Test content Test content Test content Test content Test content                            Test content Test content Test content Test content Test content</div>
</div>

.outer-div {
    width :200px;
    height :100px;
    border: 1px solid gray;
}
.inner-div {
    width :50%;
    height :75px;
    border: 1px solid black;
    overflow: auto;
}

演示小提琴