用 vh 单位替代 height: 100% 是最直接的解法，Bootstrap 5 提供 min-vh-100 类实现最小视口高度填充，配合 Flexbox（d-flex flex-column + flex-grow-1）可确保页脚沉底；Grid 方案适用于 5.3+ 版本，需自定义 grid-template-rows；JS 补高仅用于动态内容或 iOS 键盘等特殊场景。
用 vh 单位替代 height: 100% 是最直接的解法
Bootstrap 默认不提供“自动填满视口高度”的类，height: 100% 在多数嵌套场景下会失效，因为它的计算依赖父元素有明确高度——而 Bootstrap 的 .container、.row 等默认是 height: auto，导致子元素撑不开。
直接用 vh（viewport height）绕过这个限制更可靠：
-
min-vh-100是 Bootstrap 5 内置类，等价于min-height: 100vh，推荐优先使用 - 避免用
h-100（即height: 100%），除非你已手动给所有父级设了height: 100% - 如果需要内容区始终贴底（比如页脚固定在底部），
min-vh-100比vh-100更安全——它允许内容超出时自然滚动
当内容少时页脚上浮，得用 Flexbox 布局兜底
仅靠 min-vh-100 不能解决“内容不足一屏时页脚飘在中间”的问题。这时候必须启用 Flexbox 主轴对齐逻辑，让页脚沉底。
关键不是加什么 Bootstrap 类，而是结构和 CSS 配合：
- 给外层容器（如
<body>或包裹.container的<div>）加d-flex flex-column min-vh-100 - 主内容区加
flex-grow-1，它会吃掉剩余空间，把页脚往下推 - 页脚本身不需要额外高度控制，但要避免设
margin-top: auto——Flexbox 的margin-top: auto在某些旧版 Safari 上有兼容问题
示例结构：
<div class="d-flex flex-column min-vh-100"> <header>...</header> <main class="flex-grow-1">...</main> <footer>...</footer> </div>
Grid 布局在 Bootstrap 5.3+ 中可替代 Flex 方案
如果你项目已升级到 Bootstrap 5.3+，且想用更语义化的方式控制高度分配，grid 布局比 Flex 更适合“头部/主体/页脚”三段式。
注意 Grid 不是万能替代：它要求明确定义行轨道（grid-template-rows），而 Bootstrap 的 .d-grid 类只是开启 display: grid，并不自动设置模板。
- 必须配合自定义 CSS 或内联
style="grid-template-rows: auto 1fr auto" -
1fr表示主体占满剩余空间，比flex-grow-1更精确，不受父级 padding 影响 - IE 完全不支持，如果还要兼容 IE，别碰 Grid 方案
- Bootstrap 的
gap工具类（如gap-3）在 Grid 下照常生效，但justify-content类（如justify-content-between）在 Grid 容器中无效
JavaScript 动态补高只在极少数场景必要
绝大多数情况，纯 CSS 足够。只有当你遇到这些罕见问题时才考虑 JS：
- 页面有动态折叠/展开区域，且折叠后希望容器高度立刻收缩（CSS 的
min-vh-100不会回退） - 需要适配移动端键盘弹出导致 viewport 高度突变（iOS Safari 的
vh在键盘弹出时不会实时更新） - 第三方组件（如地图、富文本编辑器）内部高度不可预测，且无法用 CSS 覆盖
真要用 JS，别监听 window.resize——它太频繁；改用 matchMedia 监听 screen.height 变化，或在关键 DOM 更新后调用一次 element.style.height = window.innerHeight + 'px'。
真正难处理的是 iOS 键盘场景：vh 会卡在键盘未弹出前的值，此时只能用 document.documentElement.clientHeight 替代 window.innerHeight，并监听 focusin/focusout 手动修正。
