粘性页脚的关键是给main设flex:1让其占据剩余空间，而非给footer设flex-grow:1；需确保父容器（如body或#root）有min-height:100dvh、display:flex和flex-direction:column。
直接给 footer 加 flex-grow: 1 是错的，它会把页脚拉伸盖住内容；真正该加的是 main 或主体容器，靠它“吃掉”剩余空间，把页脚自然推到底部。
为什么 footer 上写 flex-grow: 1 会出问题
常见错误现象：页脚被撑得又高又宽、遮挡正文，或者根本没动、还飘在半空。
-
flex-grow的作用是“抢占剩余空间”，不是“沉到底部”——给footer加它，等于命令页脚自己把空白全占了 - 页脚本应保持默认尺寸和文档流位置，它的任务是“等在最后”，不是“主动扩张”
- 如果父容器没设
flex-direction: column，flex-grow甚至不会垂直生效
body 做 flex 容器时，哪些样式必须写对
很多项目失败，不是逻辑错，而是根级高度链断了。尤其在 React/Vue 项目中，body 往往只是壳，真正的容器是 #root。
- 必须给实际的 flex 容器（比如
body或#root）加min-height: 100vh，不能只写height: 100%—— 后者依赖父级高度继承，而html默认不传高度给body -
body要设display: flex和flex-direction: column，否则子元素不会垂直堆叠 -
margin: 0必须加在body上，否则默认外边距会导致布局偏移 - 如果结构是
<div id="root"></div>，那min-height和display: flex都得落在#root上，而不是body
主体内容区怎么写才不会把页脚顶飞
关键不是“控制页脚”，而是“管好中间那块”。页脚的位置，完全由它前面那个弹性元素决定。
- 用
<main></main>包裹所有可滚动内容（推荐语义化写法），并设flex: 1或flex: 1 0 auto - 不要给
main设固定高度或max-height，否则它无法响应内容增长 - 页脚本身保持
position: static（即不写任何position），也不要加margin-top: auto—— 这和flex: 1在同一容器里混用，容易冲突 - 如果页脚有背景色或边框，建议设
flex-shrink: 0防止被压缩，但必须配flex-basis: auto或显式高度，否则可能塌缩
移动端要注意的坑：键盘弹出会把页脚顶上来
在 iOS Safari 或安卓 WebView 中，软键盘弹出时视口高度（vh）会动态收缩，导致 min-height: 100vh 失效，页脚被“顶飞”到输入框上方。
- 优先用
100dvh替代100vh（Chrome 105+/Safari 16.4+ 支持），它是设备视口高度，不受键盘影响 - 降级方案：用 JS 监听
resize，检测window.visualViewport?.height变化，动态更新容器最小高度 - 避免在页脚内放
input或需要聚焦的交互元素——这本身就是反模式，页脚不是操作区
最常被忽略的一点：粘性页脚的本质不是“定位页脚”，而是“确保主体内容能撑开空间”。只要 main 真正拿到了 flex: 1 的权限，并且它的父容器高度链完整，页脚就不可能被顶飞——它只会安静地待在所有内容之后。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
