I'd like create a bootstrap card whose height and width consume the entire viewport. The card-header and card-footer must each be 15% the viewport height with the remaining 70% allocated to the card-body. If card-body's content exceeds 70%, it needs to maintain its height and add a scrollbar so the user can scroll through the content.
What Bootstrap 4.6 class and / or style attributes do I add to achieve this?
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap@4.6.1/dist/css/bootstrap.min.css" integrity="sha384-zCbKRCUGaJDkqS1kPbPd7TveP5iyJE0EjAuZQTgFLD2ylzuqKfdKlfG/eSrtxUkn" crossorigin="anonymous">
<!-- how do I make the container viewport height? -->
<div class="container">
<div class="row">
<div class="col">
<!-- How do I make the card the height of the container? -->
<div class="card">
<!-- How do I make the card-header 15% of the card height? -->
<div class="card-header">
Header
</div>
<!-- How do I make the card-body 70% of of the card height? -->
<!-- How do I make the card-body content vertically scrollable
if it's content exceeds the 70% height? -->
<div class="card-body">
Now is the time for all good men to come to the aid of their country. Now is the time for all good men to come to the aid of their country. Now is the time for all good men to come to the aid of their country. Now is the time for all good men to come
to the aid of their country. Now is the time for all good men to come to the aid of their country. Now is the time for all good men to come to the aid of their country. Now is the time for all good men to come to the aid of their country. Now
is the time for all good men to come to the aid of their country. Now is the time for all good men to come to the aid of their country. Now is the time for all good men to come to the aid of their country. Now is the time for all good men to
come to the aid of their country. Now is the time for all good men to come to the aid of their country. Now is the time for all good men to come to the aid of their country. Now is the time for all good men to come to the aid of their country.
Now is the time for all good men to come to the aid of their country. Now is the time for all good men to come to the aid of their country. Now is the time for all good men to come to the aid of their country. Now is the time for all good men
to come to the aid of their country. Now is the time for all good men to come to the aid of their country. Now is the time for all good men to come to the aid of their country. Now is the time for all good men to come to the aid of their country.
</div>
<!-- How do I make the card-footer 15% of the card height? -->
<div class="card-footer">
Footer
</div>
</div>
</div>
</div>
</div>I'd eliminate all the unnecessary grid structure around the card and use Bootstrap's viewport sizing utilities. I'd then apply Bootstrap's flex utilities to the card and set overflow on the body to auto.
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap@4.6.1/dist/css/bootstrap.min.css" integrity="sha384-zCbKRCUGaJDkqS1kPbPd7TveP5iyJE0EjAuZQTgFLD2ylzuqKfdKlfG/eSrtxUkn" crossorigin="anonymous">
<div class="card d-flex vw-100 vh-100">
<div class="card-header">
Header
</div>
<div class="card-body flex-none overflow-auto">
Now is the time for all good men to come to the aid of their country. Now is the time for all good men to come to the aid of their country. Now is the time for all good men to come to the aid of their country. Now is the time for all good men to come
to the aid of their country. Now is the time for all good men to come to the aid of their country. Now is the time for all good men to come to the aid of their country. Now is the time for all good men to come to the aid of their country. Now is the
time for all good men to come to the aid of their country. Now is the time for all good men to come to the aid of their country. Now is the time for all good men to come to the aid of their country. Now is the time for all good men to come to the
aid of their country. Now is the time for all good men to come to the aid of their country. Now is the time for all good men to come to the aid of their country. Now is the time for all good men to come to the aid of their country. Now is the time
for all good men to come to the aid of their country. Now is the time for all good men to come to the aid of their country. Now is the time for all good men to come to the aid of their country. Now is the time for all good men to come to the aid of
their country. Now is the time for all good men to come to the aid of their country. Now is the time for all good men to come to the aid of their country. Now is the time for all good men to come to the aid of their country.
</div>
<div class="card-footer">
Footer
</div>
</div>