设置引导卡中内容的高度，以使其填充整个卡块 [英] Set height of content in a Bootstrap Card so that it fills the whole card block

问题描述

我在这里定义的布局方面苦苦挣扎： https://jsfiddle.net/zmcode/uk97kfLm / 20 / 。

I am struggling with the layout defined here: https://jsfiddle.net/zmcode/uk97kfLm/20/.

问题是右侧卡中的红色 div 应该填充整个卡块。

The problem is that the red div inside the card on the right should fill the whole card block.

有人可以帮助我理解如何修改此布局以使＃right-card-content 填满整个卡牌吗？

Can someone help me in understanding how I should modify this layout in order to make the #right-card-content fill the whole right card block?

编辑 @MateusFelipe提出的解决方案实际上在Firefox上有效。不幸的是，我也需要它在Chrome（v57）上运行。

EDIT the solution proposed by @MateusFelipe actually works on Firefox. Unfortunately I need it to work on Chrome (v57) too.

推荐答案

我先前解释， h-100 是高度：100％，

I previously explained that h-100 is height: 100%, and this only works when the container has a defined height.

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>

这篇关于设置引导卡中内容的高度，以使其填充整个卡块的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！