优先用 flex + min-height: 100vh + margin-top: auto，别碰负 margin；它在现代项目里极易和 react/vue 的根节点、滚动上下文、position: sticky 冲突。
直接说结论：优先用 flex + min-height: 100vh + margin-top: auto，别碰负 margin；它在现代项目里极易和 React/Vue 的根节点、滚动上下文、position: sticky 冲突。
为什么负 margin 实现的粘性页脚现在不推荐
负 margin（比如 margin-top: -60px）本质是“视觉欺骗”：靠把页脚往上拉、内容区留出等高 padding-bottom 来模拟触底。但它有三个硬伤：
- 必须精确知道页脚高度，改个
height就得同步改两处（padding-bottom和margin-top） - 页脚脱离正常文档流，当内容超长时，可能被遮挡或错位（尤其开启
overflow: hidden或嵌套transform的容器里） - React/Vue 中，如果
#app没设min-height: 100vh，而只靠body上的负margin，整个布局会退化成“内容多就滚、内容少就悬空”，且无法触发position: sticky
Flex 布局实现粘性页脚的最小可靠写法
核心不是“怎么写 flex”，而是“在哪一层设 min-height”。常见错误是只给 body 设，却忘了 html 和框架根节点。
-
html必须设height: 100%—— 否则body { min-height: 100vh }在某些浏览器中会失效 -
body设display: flex; flex-direction: column; min-height: 100vh; margin: 0 -
main（或内容容器）设flex: 1或flex-grow: 1—— 它会吃掉所有剩余空间，把页脚往下顶 -
footer不需要额外样式，只要不设height: 0或display: none就自动到底部
示例结构：
html, body { height: 100%; margin: 0; }
body { display: flex; flex-direction: column; min-height: 100vh; }
main { flex: 1; }
footer { background: #333; padding: 1rem; }
React/Vue 项目里最容易漏掉的一环
框架通常把整个应用挂载到 #app，而 body 只是个空壳。这时 body { min-height: 100vh } 失效，因为它的子元素（#app）没继承高度。
- 正确做法：直接给根容器（如
#app）设min-height: 100vh，并让它display: flex; flex-direction: column - 不要在
body上写height: 100vh—— 它会截断溢出内容，导致长页面底部不可见 - 如果用了
position: sticky导航栏，必须确保它的滚动祖先（通常是body或#app）可滚动，而height: 100vh会让它失去滚动能力
Flex 方案下 footer 被顶出视口怎么办
现象：页脚底部有一截空白，或者滚动条出现但页脚没贴底。这几乎全是高度计算冲突导致的。
- 检查是否有多余的
margin或padding（特别是body或html的默认margin） - 确认页脚没有设
margin-bottom或父容器设了overflow: hidden - 避免对
footer使用height+flex-shrink: 0组合 —— 它可能挤压main，导致 flex 计算异常 - 更稳妥的做法：用
margin-top: auto替代flex: 1，即main { flex: 0 0 auto; }+footer { margin-top: auto; }，语义更清晰，兼容性也更好
真正麻烦的从来不是“怎么让页脚到底部”，而是“怎么让它既到底部，又不破坏滚动、不干扰 sticky、不卡死在中间”。这些细节藏在 html/body/#app 的高度传递链里，漏掉任意一环，flex 就只是个摆设。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
