所以我有一排2列。一栏有2张卡，另一栏有1张卡。第二张卡和第三张卡的内容是动态的。
有没有办法使用CSS让卡片自动设置高度，以使卡片底部对齐？当名为“ secondPanel”的卡片的内容少于名为“ thirdPanel”的卡片时，我希望增加secondPanel的高度，以使其底部与thirdPanel的底部对齐，并且对于thirdPanel而言，thirdPanel小于secondPanel高度增加，使其底部与secondPanel的底部对齐。
我尝试使用boostrap h-100类使其正常工作，但是父容器的总体高度从未设置过，因此该类似乎无能为力。我知道我可以使用javascript来比较高度并以这种方式设置高度，但是我想尽可能使用纯CSS或现有的引导功能来实现。
<div class="container">
<div class="row">
<div class="col">
<div class="card" id="firstPanel">
<div class="card-body">
<h3 class="card-title">Here's the 1st panel</h3>
<div class="card-text">We'll add a little text to fill out the height of the card a little bit</div>
</div>
</div>
<div class="card" id="secondPanel">
<div class="card-body">
<h3 class="card-title">Here's the 2nd panel</h3>
<div class="card-text">Sed ut perspiciatis unde omnis iste natus error sit voluptatem"</div>
</div>
</div>
</div>
<div class="col">
<div class="card" id="thirdPanel">
<div class="card-header card-title">
<div class="row">
<div class="col">
Results
</div>
</div>
</div>
<div class="card-body">
<table class="table table-striped table-hover">
<thead>
<tr>
<th>Name</th>
<th>Status</th>
<th></th>
</tr>
</thead>
<tbody>
<tr class="result-summary-row">
<td>Smith, Robert</td>
<td>Report Ready</td>
<td>
<a href="" target="_blank" class="btn btn-sm"><span> View Report</span></a>
</td>
</tr>
<tr class="result-summary-row">
<td>Jones, Ralph</td>
<td>Report Ready</td>
<td>
<a href="" target="_blank" class="btn btn-sm"><span> View Report</span></a>
</td>
</tr>
<tr class="result-summary-row">
<td>Jefferson, Julio</td>
<td>Report Ready</td>
<td>
<a href="" target="_blank" class="btn btn-sm"><span> View Report</span></a>
</td>
</tr>
<tr class="result-summary-row">
<td>Brauman, Derrick</td>
<td>Report Ready</td>
<td>
<a href="" target="_blank" class="btn btn-sm"><span> View Report</span></a>
</td>
</tr>
<tr class="result-summary-row">
<td>James, Henry</td>
<td>Report Ready</td>
<td>
<a href="" target="_blank" class="btn btn-sm"><span> View Report</span></a>
</td>
</tr>
</tbody>
</table>
</div>
</div>
</div>
</div>
</div>
答案 0 :(得分：0)
在您的情况下，您应该将两个面板封装在 flex div 中，然后使用 flex：1 使第二个面板填充父对象的其余部分，希望对您有所帮助
#secondPanel {
flex:1;
}<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.1.3/css/bootstrap.min.css" integrity="sha384-MCw98/SFnGE8fJT3GXwEOngsV7Zt27NXFoaoApmYm81iuXoPkFOJwJ8ERdknLPMO" crossorigin="anonymous">
<div class="container">
<div class="row">
<div class="col">
<div class="d-flex flex-column h-100">
<div class="card" id="firstPanel">
<div class="card-body">
<h3 class="card-title">Here's the 1st panel</h3>
<div class="card-text">We'll add a little text to fill out the height of the card a little bit</div>
</div>
</div>
<div class="card" id="secondPanel">
<div class="card-body">
<h3 class="card-title">Here's the 2nd panel</h3>
<div class="card-text">Sed ut perspiciatis unde omnis iste natus error sit voluptatem"</div>
</div>
</div>
</div>
</div>
<div class="col">
<div class="card h-100" id="thirdPanel">
<div class="card-header card-title">
<div class="row">
<div class="col">
Results
</div>
</div>
</div>
<div class="card-body">
<table class="table table-striped table-hover">
<thead>
<tr>
<th>Name</th>
<th>Status</th>
<th></th>
</tr>
</thead>
<tbody>
<tr class="result-summary-row">
<td>Smith, Robert</td>
<td>Report Ready</td>
<td>
<a href="" target="_blank" class="btn btn-sm"><span> View Report</span></a>
</td>
</tr>
<tr class="result-summary-row">
<td>Jones, Ralph</td>
<td>Report Ready</td>
<td>
<a href="" target="_blank" class="btn btn-sm"><span> View Report</span></a>
</td>
</tr>
<tr class="result-summary-row">
<td>Jefferson, Julio</td>
<td>Report Ready</td>
<td>
<a href="" target="_blank" class="btn btn-sm"><span> View Report</span></a>
</td>
</tr>
<tr class="result-summary-row">
<td>Brauman, Derrick</td>
<td>Report Ready</td>
<td>
<a href="" target="_blank" class="btn btn-sm"><span> View Report</span></a>
</td>
</tr>
<tr class="result-summary-row">
<td>James, Henry</td>
<td>Report Ready</td>
<td>
<a href="" target="_blank" class="btn btn-sm"><span> View Report</span></a>
</td>
</tr>
</tbody>
</table>
</div>
</div>
</div>
</div>
</div>