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
Post a Comment