html - 设置 Bootstrap Card 中内容的高度，使其填满整个卡片 block

Question

我正在努力处理此处定义的布局:https://jsfiddle.net/zmcode/uk97kfLm/20/ .

问题是右侧卡片中的红色 div 应该填满整个卡片 block 。

有人可以帮助我理解我应该如何修改此布局以使 #right-card-content 填充整个右侧卡片 block 吗？

编辑 @MateusFelipe 提出的解决方案实际上适用于 Firefox。不幸的是，我也需要它在 Chrome (v57) 上工作。

Answer 1

我previously explained h-100 是高度:100%，这仅在容器具有定义的高度时有效。

https://jsfiddle.net/1vgewck9/2/

<div class="row equal h-100">
  <div id="left-col" class="col-md-4 pr-md-2">
    <div class="card">
      Left Card
    </div>
  </div>
  <div id="right-col" class="col-md-8 pl-md-2">
    <div id="right-card-container">
      <div class="card">
        <div class="card-header">Right Card</div>
        <div class="card-block h-100">
          <div id="right-card-content" class="row">.</div>
        </div>
      </div>
    </div>
    <div id="right-bottom-element" class="mt-md-3">
      Right Bottom Element
    </div>
  </div>
</div>