html - Set height of content in a Bootstrap Card so that it fills the whole card block -


i struggling layout defined here: https://jsfiddle.net/zmcode/uk97kflm/20/.

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

can me in understanding how should modify layout in order make #right-card-content fill whole right card block?

edit solution proposed @mateusfelipe works on firefox. unfortunately need work on chrome (v57) too.

i previously explained h-100 height: 100%, , works when container has 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> 

Comments

Popular posts from this blog

php - Permission denied. Laravel linux server -

google bigquery - Delta between query execution time and Java query call to finish -

python - Pandas two dataframes multiplication? -