我正在尝试“拉伸”或展开第1列中的A部分以填充行的高度。
1行，2列：
+---------------------+---------------------+
| Column 1 | Column 2 |
| | |
| +-----------------+ | +-----------------+ |
| | Button | | | Section B | |
| +-----------------+ | | Expand/collapse | |
| | +-----------------+ |
| +-----------------+ | |
| | Section A | | +-----------------+ |
| | | | | Section C | |
| | Expands to | | | | |
| | height of 2nd | | | | |
| | Column 2, | | | | |
| | inner contents | | | | |
| | scroll | | | | |
+ +-----------------+ | +-----------------+ |
+---------------------+---------------------+
“按钮”在A部分生成文本。
A部分应该扩展到填充高度，溢出应该是可滚动的。
B部分是一个可折叠的面板。
也生成了C部分。
第2列的高度应“驱动”第1列的高度。
小提琴价值1000字，所以：https://jsfiddle.net/gnp47bLf/3/
我已经尝试将高度设置为100％，但这不起作用。单击“生成”按钮以动态加载一些文本。我不确定CSS flex属性是否可行或如何使用。正在使用Bootstrap4最新测试版。
答案 0 :(得分：1)
在这些情况下，flexbox utility课程是你的朋友。
要实现所需的布局，.tab-pane和.results-wrapper必须延伸到主行的底部。
为了实现这一目标，.d-flex已添加到.card-body，.h-100添加到.tab-pane。然后，为了使.results-wrapper能够到达行的底部，.d-flex .flex-column也应用于.tab-pane。与此同时，.results-wrapper也成为了.tab-pane的直接孩子。
$().ready(function() {
$('#generate').click(function() {
html = '<ul>';
for (let i = 0; i < 100; i++) {
html += `<li>${i}</li>`;
}
html += '</ul>'
$('#myText').html(html);
})
});.results-wrapper {
overflow-y: scroll;
}<div class="container-fluid">
<div class="row border border-warn">
<div class="col border border-success">
<div class="card text-center h-100">
<div class="card-header">
<ul class="nav nav-tabs" id="myTab" role="tablist">
<li class="nav-item">
<a class="nav-link active" id="home-tab" data-toggle="tab" href="#home" role="tab" aria-controls="home" aria-selected="true">TAB A</a>
</li>
<li class="nav-item">
<a class="nav-link" id="contact-tab" data-toggle="tab" href="#contact" role="tab" aria-controls="contact" aria-selected="false">TAB B</a>
</li>
</ul>
</div>
<div class="card-body d-flex">
<div class="tab-content" id="myTabContent">
<div class="tab-pane h-100 fade show active d-flex flex-column" id="home" role="tabpanel" aria-labelledby="home-tab">
<div class="row">
<div class="col">
<button class="btn btn-sm btn-primary" id="generate">Generate</button>
</div>
</div>
<div class="row">
<div class="col">
I would like the grey area to stretch vertically based upon the row's overall height, but without hardcoding the height to a set pixel value. Click the "Information" link to expand more data.
</div>
</div>
<div class="col results-wrapper">
<div class="col-12 results bg-secondary" id="myText">
</div>
</div>
</div>
<div class="tab-pane fade" id="contact" role="tabpanel" aria-labelledby="contact-tab">
Hi
</div>
</div>
</div>
</div>
</div>
<div class="col border border-info">
<div class="row" id="divItemInfo">
<div class="col">
<div class="card">
<div class="card-header">
<a class="collapsed" data-toggle="collapse" href="#collapseExample" aria-expanded="false" aria-controls="collapseExample">
<i class="fa" aria-hidden="true"></i>
<span id="div_current_item_information_header">Information</span>
</a>
</div>
<div class="card-body collapse" id="collapseExample">
<div id="div_current_item_information_body">
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nullam ut nisl non risus venenatis finibus sed at dolor. Mauris aliquam libero nisl, condimentum ullamcorper turpis dignissim sed. Integer maximus a quam eu semper. Cras id enim non lorem ornare varius id et lacus. Ut molestie massa eu felis gravida tristique sit amet sed nisi. Maecenas id velit tortor. Suspendisse euismod rhoncus lectus cursus finibus. Praesent vestibulum scelerisque laoreet. Mauris vulputate semper nibh ac facilisis.
</div>
</div>
</div>
</div>
</div>
<div class="row">
<div class="col">
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nullam ut nisl non risus venenatis finibus sed at dolor. Mauris aliquam libero nisl, condimentum ullamcorper turpis dignissim sed. Integer maximus a quam eu semper. Cras id enim non lorem ornare varius id et lacus. Ut molestie massa eu felis gravida tristique sit amet sed nisi. Maecenas id velit tortor. Suspendisse euismod rhoncus lectus cursus finibus. Praesent vestibulum scelerisque laoreet. Mauris vulputate semper nibh ac facilisis.
<br/><br/>
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nullam ut nisl non risus venenatis finibus sed at dolor. Mauris aliquam libero nisl, condimentum ullamcorper turpis dignissim sed. Integer maximus a quam eu semper. Cras id enim non lorem ornare varius id et lacus. Ut molestie massa eu felis gravida tristique sit amet sed nisi. Maecenas id velit tortor. Suspendisse euismod rhoncus lectus cursus finibus. Praesent vestibulum scelerisque laoreet. Mauris vulputate semper nibh ac facilisis.
<br/><br/>
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nullam ut nisl non risus venenatis finibus sed at dolor. Mauris aliquam libero nisl, condimentum ullamcorper turpis dignissim sed. Integer maximus a quam eu semper. Cras id enim non lorem ornare varius id et lacus. Ut molestie massa eu felis gravida tristique sit amet sed nisi. Maecenas id velit tortor. Suspendisse euismod rhoncus lectus cursus finibus. Praesent vestibulum scelerisque laoreet. Mauris vulputate semper nibh ac facilisis.
</div>
</div>
</div>
</div>
<div class="row border border-primary">
<div class="col">
Another Column
</div>
</div>
</div>
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-beta.3/css/bootstrap.min.css" rel="stylesheet"/>
<script src="https://code.jquery.com/jquery-3.2.1.slim.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.12.9/umd/popper.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-beta.3/js/bootstrap.min.js"></script>
答案 1 :(得分：0)
我认为这不是一个真正的Bootstrap问题。 .results-wrapper上有一个固定的高度。尝试从该类中删除height: 100px;，它应该可以正常工作。
说到Bootstrap，有一个类h-100可用于使列高达100％。但是，在这种情况下，这与此无关。