I am currently working on a Bootstrap card that needs to match the height of its container. Specifically, I want the card header to be at the top, the footer at the bottom, and the body to fill the remaining space. The body should also be scrollable to accommodate a lot of content without changing the height of the card. This design is intended for a chat window.
If you'd like to see the code in action, you can check out this fiddle I created: https://jsfiddle.net/MikeG42/Ldo1njy3/. Be sure to view the results with the columns next to each other.
HTML
<div class="container">
<div class="row">
<div class="col-md-8 red">
Some Content here that sets determines the height
</div>
<div class="col-md-4">
<div class="card h-100">
<div class="card-header">Header (this card should be same height as red)</div>
<div class="card-body scrollable">
This area Should be scrollable and fill the remaining height of its parent container.<br><br>
</div>
<div class="card-footer">Footer (should be aligned with bottom of red)</div>
</div>
</div>
</div>
</div>
CSS
.row {
background: #f8f9fa;
margin-top: 20px;
}
.col {
border: solid 1px #6c757d;
padding: 10px;
}
.red
{
background-color: red;
height: 350px;
}
.scrollable
{
overflow-y:scroll;
}