Bootstrap 4.6实现全屏视口卡片及固定比例布局与滚动效果的配置方法

要实现这个全屏卡片布局，我们可以结合Bootstrap 4.6的内置弹性布局类和少量自定义CSS，精确控制各部分的高度分配和滚动行为。以下是分步实现说明和完整代码：

关键步骤解析 #

1. 让容器和卡片占满整个视口 #

• 给最外层的.container添加vh-100（Bootstrap内置类，设置高度为100视口高度）、d-flex flex-column（启用垂直方向的弹性布局，让子元素能垂直分配高度）和p-0（移除容器默认内边距，避免视口边缘留白）。
• 给.row添加flex-grow-1（让行占满容器剩余的垂直空间），给.col添加h-100（让列高度100%继承父元素）。
• 给.card添加h-100 d-flex flex-column（让卡片高度100%继承列，同时启用垂直弹性布局，以便内部元素按比例分配高度）。

2. 分配卡片内部各部分高度 #

Bootstrap 4.6没有直接设置百分比高度的内置类，所以我们需要添加自定义CSS来控制.card-header、.card-body和.card-footer的高度：

• .card-header和.card-footer设置flex: 0 0 15%：表示这两个元素不伸缩，固定占父元素（卡片）高度的15%。
• .card-body设置flex: 1：让body部分自动占据剩余的70%高度；同时添加overflow-y: auto，当内容超出高度时自动显示垂直滚动条。

3. 优化视觉效果（可选） #

可以给card-header和card-footer添加d-flex align-items-center justify-content-center，让内容垂直水平居中，提升视觉体验。

完整代码示例 #

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Full Viewport Bootstrap Card</title>
  <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap@4.6.1/dist/css/bootstrap.min.css" integrity="sha384-zCbKRCUGaJDkqS1kPbPd7TveP5iyJE0EjAuZQTgFLD2ylzuqKfdKlfG/eSrtxUkn" crossorigin="anonymous">
  <style>
    .card-header, .card-footer {
      flex: 0 0 15%;
    }
    .card-body {
      flex: 1;
      overflow-y: auto;
    }
  </style>
</head>
<body>
  <div class="container vh-100 d-flex flex-column p-0">
    <div class="row flex-grow-1">
      <div class="col h-100">
        <div class="card h-100 d-flex flex-column">
          <div class="card-header d-flex align-items-center justify-content-center">
            Header
          </div>
          <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>
          <div class="card-footer d-flex align-items-center justify-content-center">
            Footer
          </div>
        </div>
      </div>
    </div>
  </div>
</body>
</html>

核心代码说明 #

• vh-100：确保容器高度完全匹配当前视口高度。
• d-flex flex-column：将容器和卡片设置为垂直弹性布局，让子元素能按比例分配垂直空间。
• flex: 0 0 15%：固定header和footer的高度为卡片总高度的15%，不会被内容撑开或压缩。
• flex: 1：让card-body自动填充剩余的70%高度，实现高度的自动分配。
• overflow-y: auto：当card-body内容超出高度限制时，自动显示垂直滚动条，保持容器高度不变。

内容的提问来源于stack exchange，提问作者Steve Kramer