Bootstrap 5卡片设为屏幕高度时超出屏幕的解决办法

问题描述 #

我使用最新版Bootstrap 5搭建了一个双栏页面，在右侧栏中添加了一张需要延伸至页面底部的卡片。该卡片上下存在内边距，为其添加vh-100类后，卡片会超出屏幕底部并出现滚动条；若移除内边距，卡片高度正常但上下边框将不可见。

原始代码：

<div class="container-fluid mt-2">
  <div class="row">
    <div class="col-2">
      Menu system
    </div>
    <div class="col-10">
      <div class="card vh-100 mb-3">
        <div class="card-body">
          main content area
        </div>
      </div>
    </div>
  </div>
</div>

解决方案 #

问题根源是vh-100会让卡片高度等于100%视口高度，但卡片本身的内边距、页面的外边距（mt-2、mb-3）会额外增加总高度，导致超出屏幕。以下两种方法可以解决：

方法1：利用Flex布局自动填充剩余空间（推荐）

这种方法遵循Bootstrap的Flex优先设计，无需硬编码数值，适配性更强：

<!DOCTYPE html>
<html>
<head>
  <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0/dist/css/bootstrap.min.css" rel="stylesheet">
</head>
<body class="d-flex flex-column vh-100 m-0">
  <div class="container-fluid mt-2 flex-grow-1">
    <div class="row h-100">
      <div class="col-2">
        Menu system
      </div>
      <div class="col-10 d-flex flex-column">
        <div class="card flex-grow-1 mb-3">
          <div class="card-body">
            main content area
          </div>
        </div>
      </div>
    </div>
  </div>
</body>
</html>

• 核心逻辑：让body成为垂直Flex容器并占满视口，通过flex-grow-1属性让容器和卡片自动填充剩余空间，同时完整保留所有内边距和外边距。

方法2：使用Calc计算精确高度

如果需要固定数值控制，可以通过calc抵消外边距的影响：

<div class="container-fluid mt-2">
  <div class="row">
    <div class="col-2">
      Menu system
    </div>
    <div class="col-10 p-0">
      <div class="card h-100" style="height: calc(100vh - 1rem - 0.75rem) !important;">
        <!-- 1rem对应mt-2的高度，0.75rem对应mb-3的高度 -->
        <div class="card-body">
          main content area
        </div>
      </div>
    </div>
  </div>
</div>

• 注意：这种方法需要根据实际使用的间距类匹配对应数值，灵活性不如Flex方法。

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