Question

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

Answer 1

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

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

max-height，让它增长，直到它与最大值匹配。

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

Demo Fiddle

在另一个<div> </div> </div>中包含一个<div>

3 个答案: