<分区>
<分区>
我正在使用 Bootstrap ，因此我正在使用他们的行和列类。我有一行，有两个子行。我希望能够设置父行的高度或最大高度，并让子行填满可用空间。我想要填充空间的子行使得顶部子行根据其内容增长到任何高度，所以没什么特别的，但底部子行填充父行中存在的任何可用剩余垂直空间。
我正在尝试在内容区域上方创建一个可折叠的标题区域，在内容区域下方，随着标题展开和折叠，它会扩展以占用可用空间。
我这里有一个 jsfiddle，它显示了我的行和列，但底部的子行(我已将其设置为高度 100%)扩展到了父行的边界之外。我认为高度被设置为父级的 100%，而不是我所追求的可用空间的 100%。
知道如何让底行占用 100% 的剩余空间吗？
https://jsfiddle.net/k3zw7vr2/
编辑:
我还将尝试在此处包含标记，这样您就不必离开该站点。不过，我不确定如何使用您可以在此处运行的代码示例。
#parent {
height: 300px;
}<link href="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css" rel="stylesheet"/>
<div class="container mt-5">
<div class="row p-1 bg-primary" id="parent">
<div class="col">
<div class="row mb-1 bg-secondary">
<div class="col">
I'd like this to be able to be whatever height based on the content
</div>
</div>
<div class="row child bg-secondary h-100">
<div class="col">
I want this to just take up the remaining height of the parent row
</div>
</div>
</div>
</div>
</div>最佳答案
尝试使用 d-flex给 child .col然后 flex-grow: 1;对于 .row需要剩余高度。
#parent {
height: 300px;
}<link href="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-ggOyR0iXCbMQv3Xipma34MD+dH/1fQ784/j6cY/iJTQUOhcWr7x9JvoRxT2MZw1T" crossorigin="anonymous">
<div class="container mt-5">
<div class="row p-1 bg-primary" id="parent">
<div class="col d-flex" style="flex-flow: column;">
<div class="row mb-1 bg-secondary">
<div class="col">
I'd like this to be able to be whatever height based on the content
</div>
</div>
<div class="row child bg-secondary" style="flex-grow: 1;">
<div class="col">
I want this to just take up the remaining height of the parent row
</div>
</div>
</div>
</div>
</div>关于html - 使用 Bootstrap 类，为什么我的子 div 在父级之外流动，而不是只占用剩余的高度？，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/58617009/