flexbox 的 column 布局能让 footer 贴底，是因为容器设 min-height: 100vh 后，主体内容设 flex: 1 自动占据剩余空间，将同级 footer “推”至底部；关键前提是 header、main、footer 同级且均在 flex 容器内，header 和 footer 需加 flex-shrink: 0 防压缩。
为什么 display: flex 的 flex-direction: column 能让 footer 贴底
因为 flex 容器会自动分配剩余空间，只要把主体内容设为 flex: 1，它就会撑满除 header 和 footer 外的所有高度，footer 自然被“挤”到最底部。关键不是 footer 自己定位，而是主体内容主动占位。
常见错误是只给 body 加 display: flex，但没设 min-height: 100vh —— 这会导致在内容少时 footer 悬空。必须确保容器最小高度撑满视口。
-
html和body都要设height: 100%或min-height: 100vh（推荐后者） - 主 flex 容器（通常是
body或某个 wrapper）需设flex-direction: column - 主体内容区域（如
main）必须设flex: 1，不能用flex-grow: 1单独写，否则 IE 兼容性差
HTML 结构必须满足的三个层级关系
Flexbox Sticky Footer 对 DOM 层级很敏感。footer 要贴底，它必须和 header、main 同级，且都在同一个 flex 容器内。嵌套过深或错位都会失效。
正确结构长这样：
<header>...</header><main>...</main><footer>...</footer>
常见错误包括：
- 把
footer放进main里 —— 它就变成内容的一部分，不再参与 flex 布局分配 - 用
div.wrapper包住全部，但忘了给这个wrapper设display: flex和flex-direction: column - header 或 footer 没设固定高度，导致
flex: 1计算异常（建议显式设height或flex-shrink: 0）
flex-shrink: 0 必须加在 header 和 footer 上
否则当内容很多、页面高度超出视口时，header 和 footer 可能被压缩变形 —— 尤其是含图片或复杂排版时。flex 默认允许收缩，而页头页脚通常不该被压扁。
实操写法：
header, footer { flex-shrink: 0; }- 如果 footer 有 padding/margin，注意
box-sizing: border-box是否已全局启用，否则可能撑出滚动条 - 移动端小屏下，若 footer 文字换行导致高度突变，可加
white-space: nowrap或用font-size: clamp()控制
兼容性与 Safari 的那个经典 bug
Safari（尤其 iOS 14–15）对 min-height: 100vh 解析不一致：键盘弹出时视口高度变化，但 vh 不更新，导致 footer 上浮。这不是 flex 问题，而是单位缺陷。
绕过方式（不改 flex 逻辑）：
- 用 JavaScript 动态设
min-height：监听resize，取window.innerHeight赋值给 body 的style.minHeight - 或改用
100dvh（Safari 16.4+ 支持），它响应动态视口变化 - IE11 不支持
100vh在 flex 容器里的行为，必须降级为绝对定位方案，别硬扛
真正容易被忽略的是：当页面有滚动条时，100vh 包含滚动条宽度，可能导致右侧轻微溢出。检查 body { overflow-x: hidden } 是否必要。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
