必须用min-height: 100vh而非height: 100vh，因前者确保容器至少撑满视口、内容多时自动扩展且滚动正常，后者会导致溢出截断；同时需重置html/body margin并设height: 100%，避免safari等浏览器解析失效。
直接用 display: flex + flex-direction: column + min-height: 100vh 就能可靠实现，不需要 JS，也不依赖 fixed 定位的兼容性问题。
为什么必须用 min-height: 100vh 而不是 height: 100vh
用 height: 100vh 会让容器死锁在视口高度，内容一多就溢出、滚动失效；min-height: 100vh 才是关键——它保证容器至少撑满视口，内容少时 footer 贴底，内容多时自动扩展，滚动正常。
- 如果父容器（比如
body）没设margin: 0，默认 margin 会破坏 flex 高度计算 -
html和body都要设height: 100%或参与 flex 布局，否则min-height: 100vh在某些浏览器里不生效 - 移动端 Safari 对
100vh解析不稳定（地址栏显隐影响），min-height更鲁棒
main 区域怎么推 footer 到底部
给主体内容区域（通常是 main 或 class="content"）加 margin-top: auto，不是 flex: 1 —— 后者在嵌套 flex 或有 padding 的场景下容易失效，而 margin-top: auto 是 flex 布局原生支持的“吸底”行为，更精准。
-
margin-top: auto只对 flex 子项有效，且只在主轴（column 时是垂直方向）起作用 - 不要同时给
footer设margin-top: auto，否则它和main争空间，布局错乱 - 如果
header也要固定高度，它得设明确height或flex: 0 0 auto，避免被压缩
footer 容易被压缩变形怎么办
默认情况下，flex 子项在空间不足时会 shrink，footer 尤其敏感——文字换行、图标缩放、窄屏下高度塌陷都可能发生。必须显式控制它的弹性行为。
- 加
flex-shrink: 0是底线，防止被压缩 - 避免用
flex: 0 0 auto同时设height，iOS Safari 对这个组合解析异常 - 如果 footer 内容动态（比如广告 banner 高度不固定），优先用
min-height而非height，再配合flex-shrink: 0 - 移动端需叠加
env(safe-area-inset-bottom)：用padding-bottom: calc(60px + env(safe-area-inset-bottom))预留 iPhone 底部安全区
真正难的不是写对那几行 CSS，而是意识到：footer 是否“固定”，取决于整个布局上下文是否稳定——视口变化、软键盘弹出、safe area 动态调整，都会让看似简单的 100vh 失效。所以别只盯着 footer 自己，要检查它所在的 flex 容器有没有被意外截断或重置高度。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
