Bootstrap父级设min-vh-100时子DIV如何撑满父容器高度

• min-height: 100% 不生效：CSS 百分比高度/最小高度的计算前提是父元素存在可明确计算的高度值。当前主容器通过 flex-grow-1 获得的是flex布局分配的隐式高度，未设置显式height属性，子元素的百分比值无计算基准，因此样式不生效。
• min-vh-100 导致元素溢出父容器：100vh 是整个浏览器视口的完整高度，而当前主容器的实际高度为「视口高度 - header高度 - footer高度」，内部元素设置min-vh-100时高度参考值是整个视口，自然会超出父容器范围。

基于Bootstrap 5原生flex工具类即可实现需求，不需要自定义CSS，核心修改步骤：

1. 给现有带container flex-grow-1 p-0 bg-secondary类的主容器追加d-flex flex-column类，将其转为纵向弹性容器
2. 主容器内部需要撑满高度的目标DIV，添加h-100类，移除之前加的min-vh-100类，也不需要额外写min-height: 100%自定义样式
3. 目标DIV内部的主内容区保留flex-grow-1类，底部模块不需要额外高度属性，会自动固定在主容器底部；内容不足时页脚会自动贴在视口最底部，内容超出时随页面正常滚动。

参考代码结构 #

<body class="min-vh-100 d-flex flex-column bg-primary">
  <header>
    <!-- 头部导航等内容 -->
  </header>
  <!-- 主容器追加d-flex flex-column -->
  <main class="container flex-grow-1 p-0 bg-secondary d-flex flex-column">
    <!-- 内部目标DIV加h-100，保留原有d-flex flex-column -->
    <div class="d-flex flex-column h-100">
      <div class="flex-grow-1">
        <!-- 主内容区，内容不足时自动填充剩余垂直空间 -->
      </div>
      <div>
        <!-- 主区域底部固定内容 -->
      </div>
    </div>
  </main>
  <footer>
    <!-- 全局页脚内容 -->
  </footer>
</body>

注意：在通过flex-grow分配高度的容器内，不要使用min-vh-*类设置子元素高度，这类单位基于视口计算，不会参考父容器实际高度，必然引发溢出问题。

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