在 Bootstrap 4.6 中将卡片大小调整为视口
Size card to viewport in Bootstrap 4.6
我想创建一个 bootstrap 卡片，其高度和宽度占用整个视口。卡片页眉和卡片页脚必须各占视口高度的 15%，其余 70% 分配给卡片主体。如果card-body的内容超过70%，则需要保持其高度并添加一个滚动条，以便用户可以滚动浏览内容。
我应该添加哪些 Bootstrap 4.6 class 和/或样式属性来实现此目的？
<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's
viewport sizing utilities. I'd then apply Bootstrap's flex utilities 到卡并将 body 上的溢出设置为自动。
<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>
我想创建一个 bootstrap 卡片，其高度和宽度占用整个视口。卡片页眉和卡片页脚必须各占视口高度的 15%，其余 70% 分配给卡片主体。如果card-body的内容超过70%，则需要保持其高度并添加一个滚动条，以便用户可以滚动浏览内容。
我应该添加哪些 Bootstrap 4.6 class 和/或样式属性来实现此目的？
<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's viewport sizing utilities. I'd then apply Bootstrap's flex utilities 到卡并将 body 上的溢出设置为自动。
<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>