bootstrap中.container的min-height不生效，主要是因父元素（html/body）无高度、子元素脱离文档流或未设明确高度；应优先用.min-vh-100等工具类，配合flex布局或calc()留出页脚空间。
bootstrap 里 .container 的 min-height 为什么经常不生效？
因为 bootstrap 默认没给 .container 设 min-height，它只设了 max-width 和左右 auto margin。如果你写了 min-height: 300px 却没效果，大概率是父元素（比如 body 或 html）高度为 0，或者容器内部没有内容撑开——css 的 min-height 是“最小不低于”，但不会主动“顶起”空容器。
- 必须确保
html和body有明确高度（比如height: 100%），否则min-height: 100vh才能真正起作用 - 如果容器内只有浮动或绝对定位子元素，它们会脱离文档流，
min-height就失去参照，得加overflow: hidden或伪元素清除浮动 - Bootstrap 4/5 的
.container是块级、无固有高度的，它不会像 Flex 容器那样自动“包裹”子项，除非子项有真实高度
用 Utility 类快速设置最小高度（Bootstrap 4+）
Bootstrap 4 起内置了响应式高度工具类，比手写 CSS 更可靠，也避免 !important 污染。
-
.min-h-100：最小高度 = 父容器高（不是视口！），适合嵌套在h-100父级中 -
.min-vh-100：最小高度 = 视口高度（100vh），这才是让容器“至少一屏高”的正解 - 想适配小屏？用响应式变体：
.min-vh-50（所有尺寸）、.min-vh-md-75（≥768px 时才生效） - 注意：
.min-h-*类单位是 rem，值对应预设比例（如h-25≈ 25% 高度），而.min-vh-*直接映射视口百分比，更直观
手动覆盖时，!important 不是万能解药
直接改 .container { min-height: 500px !important } 看似快，但容易引发连锁问题。
- 如果页面用了
.container-fluid或自定义网格，!important会干扰其他组件的高度逻辑 - 在媒体查询里重复覆盖时，
!important会让调试变得困难——你永远不确定是哪个规则赢了 - 更稳妥的做法是加一个自定义 class：
<div class="container min-h-custom">，然后单独写 <code>.min-h-custom { min-height: calc(100vh - 80px) }（减去 header/footer 高度） - 如果必须全局改，优先用 Sass 变量重定义（如 Bootstrap 5 的
$container-max-widths同理可扩展$spacers），而不是暴力 patch CSS - 正确做法是：容器用
min-height: calc(100vh - footer-height)，再配合margin-bottom: footer-height - 或者用 Flex 布局：把
body设为display: flex; flex-direction: column，容器flex: 1，footermargin-top: auto——这时min-height反而不需要了 - Bootstrap 官方 sticky-footer 示例就是靠这个逻辑，硬塞
min-height只会让它失效
和粘性页脚一起用时，最小高度要留出空间
很多人设了 .min-vh-100 后发现页脚被顶出视口——那是因为容器高度已满屏，footer 只能往下挤。
实际项目里，最常被忽略的是「最小高度」和「内容是否真实存在」之间的关系。空容器 + min-vh-100 是安全的；但如果你动态加载内容，又没监听加载完成后的高度重置，滚动条或布局错位就很难避免。
