在另一个 <div> 中包含一个 <div>答案

【问题标题】：Contain A <div> Within Another <div>在另一个 <div> 中包含一个 <div>
【发布时间】：2013-07-17 01:52:50
【问题描述】：

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

【问题讨论】：

标签： css html web

【解决方案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 中删除高度，它就不再起作用了。当您给出百分比高度时，它会根据其父高度计算它。
如果在 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>

【讨论】：

【解决方案2】：

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

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

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

</div>

【讨论】：

的大小按百分比变化。在水平调整大小方面，子 div 中的文本移动，将文本向下推。这就是文本溢出的原因。
您是否试图将父级保持在固定高度？否则它应该按预期垂直调整大小。
不，父母正在按我的意愿工作。我和孩子有问题。我希望孩子不要溢出。孩子的顶部留在 div 中，但随着父 div 水平变小，子 div 也会变小，但父 div 不会垂直增长 - 这就是我想要的方式。问题是随着孩子水平变小，垂直变长。

【解决方案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

【讨论】：

这里是基于您提供的演示的修改版本，它演示了我的问题。 (jsfiddle.net/KTC3S/3) 我想让溢出文本添加一个滚动条。对我来说问题是溢出：自动；不起作用。
你应该在inner-div中设置height，否则不起作用...jsfiddle.net/KTC3S/5
我可以使用'auto'作为高度吗？
@GCyrillus 我的父 div 有一个百分比定义的高度。