height: 100%不生效是因为百分比高度依赖父容器明确高度，而html和body默认高度为auto；需显式设html、body为100%或100vh，或改用min-vh-100、flex-grow-1等更可靠方案。
为什么 height: 100% 不生效？
直接给 div 写 height: 100% 通常没用，因为 CSS 中百分比高度依赖父容器有明确高度。而默认情况下，html 和 body 没有设定高度，导致整个继承链高度为 auto，子元素的 100% 就失去参照。
- 必须显式设置
html和body的高度为100%（或100vh） - Bootstrap 5 默认不重置
body高度，这点和某些 UI 框架不同 - 如果 div 在 flex 容器里，还要确认父容器是否启用了
flex-direction: column等影响主轴的行为
用 vh 单位最简单可靠
全屏高度最直接的方式是用视口单位：100vh 表示 100% 视口高度，不依赖父级高度继承。
<div class="full-height"></div>
对应 CSS：
.full-height {
height: 100vh;
}
- 注意：在 iOS Safari 或部分安卓浏览器中，
100vh可能因地址栏显示/隐藏而动态变化，造成布局跳动 - 如需稳定高度（比如固定页脚场景），可改用
min-height: 100vh+ 内容自适应 - Bootstrap 自带的
min-vh-100工具类就是为此设计的
用 Bootstrap 5 内置工具类快速实现
Bootstrap 5 提供了开箱即用的响应式高度工具类，无需写额外 CSS。
<div class="min-vh-100"></div>
-
min-vh-100=min-height: 100vh，内容超出时自动撑高，推荐日常使用 -
vh-100=height: 100vh，严格限定高度，内容溢出会被裁剪 - 这些类支持响应式变体，例如
min-vh-100 d-md-block可控制断点显示 - 若需同时铺满宽度，加
w-100；但注意它不等价于container-fluid的左右 padding 行为
遇到滚动条或留白怎么办？
即使设置了 100vh，仍可能看到底部空白或意外滚动条——常见原因不是高度设错，而是边距、填充或盒模型干扰。
- 检查是否有默认
margin（比如body的默认外边距，Bootstrap 4+ 已重置，但自定义样式可能覆盖） - 确认没有意外的
padding或border导致盒模型总高度超限（可用box-sizing: border-box统一） - 移动端键盘弹出时，
vh值可能被浏览器错误计算，此时需 JS 动态修正（如监听resize事件重设style.height） - 如果 div 是 Flex 子项且父容器是
d-flex flex-column，优先用flex-grow-1而非vh，更符合弹性布局语义
实际项目中，min-vh-100 覆盖 90% 场景，但只要页面结构嵌套深、或混用 Flex/Grid，就得回头检查每个父级的高度来源——这才是最容易被忽略的环节。
