的在引导卡的内容设定高度，使其充满整卡块

Question

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

的问题是，红色div右侧的卡里面应该充满整卡块。

有人可以帮助我理解我应该怎么才能使#right-card-content充满整个右卡块修改此布局？

编辑 @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> 

Answer 2

This可以解决你的问题。

我设置div的width到100%，从中取出row类，并与p-0删除父（card-block）的填充。

html, body { 
 
    height: 100%; 
 
} 
 

 
div.card { 
 
    height: 100%; 
 
} 
 

 
#left-col { 
 
    height: 100%; 
 
} 
 

 
#right-col { 
 
    display: flex; 
 
    flex-direction: column; 
 
    height: 100%; 
 
} 
 

 
#right-card-container { 
 
    flex: 1; 
 
} 
 

 
#right-card-content { 
 
    height: 100%; 
 
    width: 100%; 
 
    background: red; 
 
} 
 

 
#right-bottom-element { 
 
    background: blue; 
 
    display: inline-block; 
 
    height: 100px; 
 
    width: 100%; 
 
}

<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 p-0"> 
 
      <div id="right-card-content"></div> 
 
     </div> 
 
     </div> 
 
    </div> 
 
    <div id="right-bottom-element" class="mt-md-3"> 
 
     Right Bottom Element 
 
    </div> 
 
    </div> 
 
</div>