所以我有两列的行。一栏有2张卡，另一栏有1张卡。第二张卡和第三张卡的内容是动态的。
有没有办法使用CSS让卡片自动设置高度，以使卡片的底部对齐？当名为“ secondPanel”的卡片的内容少于名为“ thirdPanel”的卡片的时候，我希望增加secondPanel的高度，以使其底部与thirdPanel的底部对齐，并且当thirdPanel小于thirdPanel的secondaryPanel时，增大高度，使其底部与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>
最佳答案
在您的情况下，您应该将两个面板封装在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>关于html - 在引导卡上设置高度，我们在Stack Overflow上找到一个类似的问题：https://stackoverflow.com/questions/52836538/