用 min-height: 100vh 撑满视口最可靠，避免 height: 100vh 截断内容；推荐设在主容器而非 html/body；配合 Flex 布局（父容器 flex-column + min-height: 100vh，主内容 flex: 1）可实现页脚粘底；iOS Safari 需注意 vh 兼容性，可用 JS 动态适配或回退 height: 100%。
当页面内容较少、高度不足一屏时，底部会出现大片空白，影响视觉效果和用户体验。用 min-height 撑满视口是最常用且可靠的解决方式。
设置 min-height: 100vh 代替 height: 100vh
height: 100vh 会强制元素刚好占满视口高度，如果内容超出就会被截断或溢出；而 min-height: 100vh 表示“至少占满一屏”，内容多了自动撑开，少了就补足空白，更安全灵活。
- 推荐写在页面主容器（如
main、.container或body的直接子元素）上 - 避免直接设在
html或body上（可能引发滚动条异常或 margin 折叠问题） - 若使用 Flex 布局，可配合
flex: 1实现更自然的自适应
配合 flex 布局实现“页脚粘底”
仅靠 min-height 只能填满空白，但无法保证页脚始终在视口底部（内容少时页脚悬浮，内容多时正常流式排列）。此时推荐 Flex 布局：
- 给父容器（如
body）设display: flex; flex-direction: column; min-height: 100vh; - 主内容区加
flex: 1;，它会自动占据剩余空间 - 页脚保持默认流式或固定高度，自然被“推”到底部
注意移动端和 Safari 的兼容细节
部分 iOS Safari 版本对 vh 单位有兼容问题（比如地址栏收放时 vh 值不更新），导致撑不满或撑过头：
立即学习“前端免费学习笔记（深入）”；
- 可改用 JavaScript 动态设置：监听
resize，用document.documentElement.clientHeight更新min-height - 或退而求其次，用
min-height: 100%并确保父级（html,body）也设了height: 100% - 测试时务必在真机 Safari 中验证滚动与高度表现
慎用 height: 100% 替代方案
height: 100% 依赖父元素有明确高度，容易因层级中断失效（比如某个父级没设 height，整条链就断了）。相比 vh 单位，它更难调试、容错性低，仅在特定嵌套场景下可用，不建议作为首选。
