所以基本上我想在另一个 div 中有两个 div，并且内部 div 应该占用所有可用空间。在寻找解决方案时，我发现了很多针对此问题的解决方案，但我无法对我的问题应用任何解决方案，因为所有解决方案的共同点是其中一个内部 div 具有固定大小。我的问题不是这种情况。
编辑: 我想指出 div a 和 b 的内容都是动态加载的。所以我无法为它们中的任何一个设置固定大小。
所以让我们得到这个准确的: 我有一个 div“主要” 这个 div 包含一个 div "a"和另一个在 'a' 下面的 div "b"。 Div 'a' 是更重要的 div，因此它应该始终显示其所有内容并占据显示其内容所需的尽可能多的大小。由于内容是可变的，所以我将“a”设置为自动。 到目前为止一切顺利。
现在我在设置 b 的大小时遇到了问题。它应该占用所有剩余的可用空间，如果这不足以显示其所有内容，它应该显示一个滚动条。
这可以用纯 html/css 实现吗？
这是一个粗略显示问题的链接 - 将真实代码复制到 fiddler 将是使用许多外部库等的困难原因。 文本显然应该留在主 div 的边界内。 此外，所有文本都只是一个占位符，稍后会自动填充
这是链接 http://jsfiddle.net/WH64v/5/
这是代码
<body>
<div style="width:300px; height:300px; border-style: solid;">
<div style="border-style: solid; height: auto">
hello1 <br>
hello2
</div>
<div style="overflow: auto">
hello3 <br>
hello3 <br>
hello3 <br>
hello3 <br>
hello3 <br>
hello3 <br>
hello3 <br>
hello3 <br>
hello3 <br>
hello3 <br>
hello3 <br>
hello3 <br>
hello3 <br>
hello3 <br>
hello3 <br>
end
</div>
</div>
</body>
最佳答案
您必须为此使用表格样式。
HTML
<div style="width:300px; height:300px; border-style: solid; display: table;">
<div style="display: table-row">
<div style="border-style: solid; box-sizing:border-box; width: 100%; display: table-cell;">
hello1 <br />
hello2
</div>
</div>
<div style="display: table-row; height: 100%;">
<div style="float: left; overflow: auto; display: table-cell; box-sizing:border-box; height: 100%; width: 100%;">
hello3 <br />
hello3 <br />
hello3 <br />
hello3 <br />
hello3 <br />
hello3 <br />
hello3 <br />
hello3 <br />
hello3 <br />
hello3 <br />
hello3 <br />
hello3 <br />
hello3 <br />
hello3 <br />
hello3 <br />
end
</div>
</div>
</div>
JSFiddle:http://jsfiddle.net/gBgfe/
关于css - 两个 div 到另一个 div，都具有可变大小，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/17907895/