页脚贴底需设父容器min-height: 100vh、flex-direction: column，主内容区用flex: 1吸剩余空间，页脚用flex: 0 0 auto；禁用fixed/absolute定位；注意Safari兼容性及隐性高度干扰。
页脚不贴底？Flex布局的正确用法
多数人用 display: flex 做全屏布局时，页脚悬空或压住内容，根本原因是没设容器高度基准。Flex 本身不“撑高”父容器，min-height: 100vh 才是关键起点。
- 父容器（如
body或外层div）必须有明确高度依据，height: 100%不可靠（依赖祖先），min-height: 100vh更稳妥 -
flex-direction: column必须设置在父容器上，子元素才能按列排列 - 主内容区要用
flex: 1（等价于flex: 1 1 auto），它会吸收剩余空间，把页脚“顶”到底部 - 避免给页脚设
margin-top: auto—— 这在旧版 Safari 里有渲染 bug，优先用flex: 0 0 auto+margin-top: auto组合，但更推荐纯flex: 1+ 页脚自身不占弹性空间
定位方案踩坑：fixed / absolute 为什么不能直接用
用 position: fixed 或 absolute 把页脚钉在底部，看似简单，实际会破坏文档流，导致内容被遮挡、打印异常、无障碍阅读失败。
-
fixed页脚脱离文档流，页面滚动时它始终可见，但正文高度不足时，页脚会覆盖在内容末尾上方 -
absolute需要父容器设position: relative且有明确高度，否则页脚会相对于视口定位，行为不可控 - 两者都绕过语义结构，屏幕阅读器可能跳过页脚，或误判页面结束位置
- 打印样式表中，
fixed元素默认每页重复，absolute可能完全消失
兼容性细节：Safari 和旧版 Chrome 的 flex 行为差异
Safari 14.1 之前、Chrome 55 以下对 flex: 1 在 column 容器中的解析不一致，尤其当内容高度超过视口时，页脚可能被拉伸或错位。
- 显式写全
flex: 1 1 0比只写flex: 1更稳定（避免 Safari 把flex-basis解析为auto） - 给主内容区加
overflow: hidden或min-height: 0，防止其内部 flex 子项撑破容器（常见于嵌套卡片列表） - 避免在页脚内用
flex: 1，它会和主内容区争抢空间；页脚应保持flex: 0 0 auto - 测试时务必用真实设备或模拟 viewport 缩放，
vh单位在 iOS Safari 中受地址栏显示/隐藏影响，可用100dvh替代（但需检查支持度）
内容极短时页脚仍上浮？检查这些隐性高度来源
即使用了正确 flex 结构，页脚还是没到底，大概率是某些元素悄悄吃了高度：内边距、字体行高、匿名文本节点、伪元素、甚至未重置的 margin-bottom。
- 检查
body和根容器是否有默认margin（如 Chrome 的8px），用margin: 0清除 - 主内容区若含
p、h1等块级元素，它们自带上下margin，可统一设margin: 0或用* + *选择器归零相邻间距 - 字体
line-height大于 1 时，段落实际高度 > 字号，会导致内容区“虚高”，影响flex: 1分配精度 - 用浏览器开发者工具的盒模型高亮，逐层查看“计算高度”是否等于预期，重点盯
border-box尺寸与scrollHeight差值
真正难的不是写对那三行 CSS，而是当页脚在某台 iPad 上偏移 2px 时，得意识到那可能是 100vh 被地址栏吃掉了一截，而不是 flex 写错了。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
