我想创建一个引导卡，其高度和宽度消耗整个视口。card-header和card-footer必须分别是视窗高度的15%，其余的70%分配给card-body。如果card-body的内容超过70%，则需要保持其高度并添加滚动条，以便用户可以滚动内容。
我应该添加哪些Bootstrap 4.6类和/或样式属性来实现这一点?
<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>我会消除卡周围所有不必要的网格结构，并使用Bootstrap的视口大小实用程序。然后，我将Bootstrap的flex实用程序应用到卡片上，并将body上的overflow设置为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>