正确写法是先设置html和body{min-height:100%;margin:0}，再给.container加min-height:100vh；若需内部列等高，还需添加display:flex和flex-direction:column。
Container最小高度设为视口高度的正确写法
Bootstrap默认的.container或.container-fluid不会自动撑满整个视口高度，单纯加min-height: 100vh往往无效——因为父元素（如body、html）高度未显式定义，导致vh计算失效。
必须确保html和body高度为100%
这是最常被跳过的前提。如果html和body没设高度，100vh在某些场景下仍可能不生效（尤其嵌套在Bootstrap栅格中时）。
-
html和body都要设置height: 100%或min-height: 100% - 推荐用
min-height: 100%，避免内容超长时被截断 - 同时清除
body默认的margin，防止顶部白边
html, body {
min-height: 100%;
margin: 0;
}
给Container加min-height: 100vh并处理flex布局问题
Bootstrap 5+ 默认用flexbox构建栅格，但.container本身不是flex容器。若希望内容垂直居中或撑满，需额外干预。
- 直接对
.container设min-height: 100vh即可满足“最小高度=屏幕高”需求 - 若内部有
.row+.col，且想让列等高撑满，需给.container加display: flex和flex-direction: column - 注意：加
flex后，.row默认flex-shrink: 1，可能压缩内容；可加flex-shrink: 0控制
.container {
min-height: 100vh;
display: flex;
flex-direction: column;
}
兼容旧版Bootstrap（v4）与移动端注意事项
Bootstrap 4中.container宽度受限于断点，min-height: 100vh在小屏下可能因左右padding导致水平滚动条；iOS Safari对vh支持存在历史bug（如地址栏收起时vh不更新）。
- 移动端建议用
min-height: -webkit-fill-available兜底（Safari专用） - 避免在
.container上同时用max-width和min-height: 100vh却不设width: 100%，否则在窄屏下高度计算异常 - 如需精确适配，可用JavaScript动态设
style.minHeight = window.innerHeight + 'px'，但多数场景纯CSS已足够
真正容易出问题的不是写哪行CSS，而是忘了html和body的高度继承链——这个细节在Bootstrap项目里几乎每次都会漏掉一次。
