min-vh-100 是实现“至少一屏高”的正解，等价于 min-height: 100vh，内容超出时自动撑高且仅一条滚动条；需避免 vh-100 锁死高度导致截断或跳变，并确保 html/body 未被设为 height: auto、父容器未中断高度链、.row 配合 d-flex 才能使 .col 正确生效。
min-vh-100 是最直接有效的响应式最小高度类
想让容器“至少一屏高”，min-vh-100 是 bootstrap 5+ 内置的正解，它等价于 min-height: 100vh，内容超出时自动撑高，只有一条滚动条。别用 vh-100（即 height: 100vh），它会锁死高度，导致文字截断、页脚被顶出、safari 地址栏收放时布局跳变。
常见错误是加了 min-vh-100 却没效果，大概率因为：
• html 或 body 被 JS 动态设为 height: auto（比如某些 UI 初始化脚本）
• 容器外层套了没设高度的 <div>，中断了高度传递链
• 容器本身是 .container 或 .row，而它们父级没提供可参照的高度
.min-h-* 和 .min-vh-* 的参照系完全不同
.min-h-100 按父容器高度计算（比如父级设了 min-height: 500px，那它就是最小 500px），而 .min-vh-100 直接按视口高度算，更直观可靠。响应式变体如 .min-vh-md-75 只在 ≥768px 时生效，适合 banner 区域在小屏降级为半屏。
别混淆这两个前缀：
• .min-h-25 ≈ 最小高度为父容器的 25%，但父容器若没高度，它就无效
• .min-vh-50 = 最小高度为视口高度的 50%，不依赖父级，只要 html/body 不塌就行
嵌套在 .row 或 .col 里时，必须激活 Flex 布局
.row 默认是 display: block，.col 是普通块级元素，不会继承或拉伸高度。min-vh-100 加在 .col 上基本无效，除非你先让 .row 变成 Flex 容器：
<div class="row d-flex"> <div class="col-md-6 min-vh-100">内容</div> <div class="col-md-6 min-vh-100">内容</div> </div>
关键点：
• 必须给 .row 加 d-flex，否则 .col 的 min-vh-* 失去参照
• 避免同时写 height: 100% 和 min-height —— 前者在无父高时算出来是 0，会覆盖后者
• 别给 .col 设 align-self: flex-start 或 flex: 0 0 auto，这会绕过默认的 stretch 行为
背景图容器和粘性页脚场景下的高度留白
如果容器带 background-image，min-vh-100 是刚需，否则图片因容器高度为 0 而缩成一条线。但要注意：
• 必须配 background-position: center center 和 background-repeat: no-repeat，否则裁剪不可控
• 若下方接固定 footer，直接 min-vh-100 会让页脚被挤出视口，正确做法是用 Flex 布局：<body class="d-flex flex-column min-vh-100">，主内容区加 flex-grow-1，页脚自然沉底
真正容易被忽略的是：所有中间父容器（比如 .container-fluid → .row → .col）都得检查是否意外中断了高度链，尤其当用了第三方组件或框架生成的 wrapper div 时——它们常常没设高度，却成了“看不见的塌陷节点”。
