不能对body设display: flex，因Safari≤15.3和旧Edge不支持，会导致页脚塌缩；应改用显式包裹容器（如.page或#app），并配合html/body{height:100%}、.page{display:flex;flex-direction:column;min-height:100vh}及main{flex:1}实现稳住页脚。
直接用 display: flex + flex-direction: column + flex: 1 就能稳住页脚，但必须绕开 body 直接设 flex 的坑——它在 Safari ≤15.3 和旧 Edge 里会彻底失效，React/Vue 项目中更危险，因为 body 往往只是个空壳。
为什么不能对 body 设 display: flex
部分 Safari（尤其是 ≤15.3）和旧版 Edge 不支持对 body 元素应用 display: flex，布局会直接塌缩：页脚浮在内容末尾上方，而不是贴底。React/Vue 项目中，#app 才是实际根容器，body 上设了也白设。
正确做法是引入一个显式包裹容器，比如 .page 或 #app，把 header、main、footer 都包进去。
-
html和body都要加height: 100%，否则min-height: 100vh在旧 Chrome/Edge/Safari 中会降级为auto - 清掉
body默认的margin: 8px，否则顶部/底部会多出不可见空白 - 容器（如
.page）设display: flex; flex-direction: column; min-height: 100vh
main 区域必须用 flex: 1，不是 flex-grow: 1
flex: 1 是 flex-grow: 1; flex-shrink: 1; flex-basis: 0 的简写，它让内容区真正“抢占”剩余空间；而单独写 flex-grow: 1 在 IE/Edge 16–18 下行为不一致，可能导致页脚上浮或错位。
如果中间有多个区块（如 aside、section），建议统一用 flex: 1 控制主体区域，而不是只靠 margin-top: auto 推页脚——后者在嵌套弹性子项时容易因基线计算偏差导致高度塌陷。
-
flex: 1对响应式文字缩放、动态高度变化（如系统字体放大）天然鲁棒 -
flex-grow: 1单独使用时，flex-basis默认是auto，可能受子元素内容高度干扰 - 不要给
footer加flex-shrink: 0—— 它默认就是，加了反而可能干扰高度计算
为什么禁用 position: sticky 实现 Sticky Footer
position: sticky 的语义和行为完全不匹配 Sticky Footer 的需求：它依赖父容器滚动来触发“粘性”，而页脚天生就在 DOM 末尾，一加载就在视口底部，浏览器多数时候直接降级为 static，根本看不出效果。
短页面里，footer 可能悬在半空；长页面里，可能叠在内容上。即使硬加 bottom: 0，也无法响应视口高度变化（比如横竖屏切换、缩放），且不支持 IE 和 Safari ≤15.3。
- 真正适合
position: sticky的是悬浮导航栏、冻结表头这类「滚动中吸附」场景 - Sticky Footer 的核心诉求是「布局占位」：内容少时压底、内容多时随流下移
- 用
flex: 1实现的方案，哪怕footer高度动态变化（比如文字缩放后变高），也能稳住整体布局
页脚被顶出视口或出现滚动条怎么办
现象：页脚底部有一截空白，或者滚动条出现但页脚没贴底。这几乎全是高度计算冲突导致的——常见于嵌套 transform、overflow: hidden 容器，或 footer 内部用了 flex + align-items: center 等未设 min-height 的组合。
- 检查是否所有父级容器（包括
.page的直接父元素）都未设height: 0或overflow: hidden -
footer内部若含弹性子项，需确保其自身有明确最小高度（如min-height: 60px），否则 Flex 容器可能收缩到内容高度 - 避免在
.page或其子容器上同时使用min-height: 100vh和height: 100%，二者混用易引发 Safari 渲染异常
Flex 方案的容错率高，但那个 min-height: 100vh 和 flex: 1 的配合点，一旦漏掉任意一环，问题往往只在特定 Safari 或旧 Edge 上复现，排查成本很高。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
