在一个<div>元素中包含另一个<div>元素

Question

我试图将一个div的边框限制在其父div内，并且希望子div中溢出的文本能够自动为子div添加滚动条。我已经尝试了所有我能想到的方法，但我不知道如何实现我想要的效果。请问有人能够告诉我如何以最有效的方式实现吗？

- PWF

Answer 1

我的父div的高度是按百分比定义的

只要父元素有一个有效值的高度，这就不是问题。您可以使用百分比值设置高度或最大高度。

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或body中删除height属性，则无法正常工作。 当您给出百分比高度时，它会从其父元素的高度计算出来。 如果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>

- G-Cyrillus

Answer 2

请检查一下（不确定您是否需要类似这样的内容），

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

演示 Fiddle

- Nalaka526

---

根据您提供的演示，这里是一个修改后的版本，展示了我的问题。（http://jsfiddle.net/KTC3S/3/）我想让溢出文本添加滚动条。对我来说，问题在于overflow:auto;无法正常工作。 - PWF

你应该在内部div中设置“height”，否则它将无法正常工作... http://jsfiddle.net/KTC3S/5/ - Nalaka526

我可以使用“auto”来设置高度吗？ - PWF

@GCyrillus 我的父级 div 元素高度是以百分比定义的。 - PWF

Answer 3

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

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

<div style="position:absolute;overflow:auto;border:solid black 1px;">我的内容</div>

</div>

- Blake A. Nichols

---

<div> 的大小按百分比变化。在水平缩放方面，子 div 中的文本会移动，并将文本向下推。这就是为什么文本会溢出的原因。 - PWF

你是想保持父元素的固定高度吗？否则它应该按预期垂直调整大小。 - Blake A. Nichols

不，父元素的工作方式是我想要的。我的问题出在子元素上。我希望子元素不会溢出。子元素的顶部保持在 div 中，但随着父元素 div 水平缩小，子元素 div 也会缩小，但父元素 div 不会在垂直方向上增长-这就是我想要的方式。问题是当子元素水平缩小时，它会垂直变长。 - PWF