footer不贴底主因是父容器未撑满视口高度，需为html和body设min-height: 100vh、margin: 0，.app设display: flex、flex-direction: column和min-height: 100vh，footer设margin-top: auto即可。
父容器没撑满视口高度，flex-direction: column 就白设了
绝大多数 footer 不贴底，根本不是 flex-direction 写错了，而是 html 和 body 默认不占满 100vh。子元素用 margin-top: auto 或 flex: 1 时，压根没空间可“挤”。
- 必须给
html和body加min-height: 100vh（推荐）或height: 100%，且确保margin: 0 - 包裹结构的容器（比如
.app或.layout）要设display: flex+flex-direction: column+min-height: 100vh - 别用
height: 100vh—— 内容超长时会截断 footer
用 margin-top: auto 推 footer 比 flex: 1 更轻量
直接让 footer 自己“沉到底”，不需要在 main 上加弹性属性，兼容性更好，也更少出 bug。
- footer 必须是 flex 容器的**直接子元素**，且排在 main 之后
- 只需给
footer加margin-top: auto，其他啥都别设（不用flex、不用height、不用flex-shrink: 0） - 如果同时给 footer 设了
height和margin-top: auto，某些浏览器（如旧版 Safari）会算错剩余空间，导致 main 高度塌缩
内容超长时滚动区域该设在哪？
默认整个页面滚动，但多数场景下只希望 main 区域滚，footer 始终可见。这时不能只靠 overflow-y: auto 往 main 上一贴就完事。
- main 的父容器（即 flex 容器）必须有确定高度上下文，也就是已设
min-height: 100vh - main 自身设
overflow-y: auto即可生效，无需再设height—— flex 布局已给它分配了可用空间 - 千万别给
html或body加overflow: hidden，会切掉 footer 的点击区域和键盘焦点
iOS Safari 的 100vh 抖动问题怎么应对
地址栏收放、键盘弹出会动态改变视口高度，min-height: 100vh 可能瞬间失效，导致 footer 悬空半秒。
- 这不是写法错误，是 iOS WebKit 的固有限制，无法靠纯 CSS 彻底规避
- 现代项目可忽略；若需兼容老 iOS（如 iOS 12 及更早），可用 JS 监听
resize事件，动态重设容器高度 - 更稳妥的降级思路：用
margin-top: auto方案本身对抖动不敏感——只要容器高度没归零，footer 就仍会被推到底部
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
