最可靠的页脚布局方案是flex+min-height:100vh，即body设display:flex、flex-direction:column和min-height:100vh，main设flex:1，footer不设定位或高度，确保页脚始终在内容下方且响应式友好。
footer高度不确定时，absolute会遮挡内容
用 position: absolute 把 footer 钉在底部，前提是父容器有明确高度且内容不溢出。但实际页面中，main 区域高度经常小于视口，此时 absolute 会让 footer 压在内容上——尤其当用户缩放或字体变大时，文字直接被盖住。
- 必须给
html和body设height: 100%，否则absolute的“底”没参照 -
footer的bottom: 0是相对于最近的定位祖先，不是视口，容易误判 - 如果页面内容动态加载（比如 Vue/React 组件异步渲染），初始高度算不准，
absolute会提前占位或错位
更稳的方案是 flex + min-height: 100vh
把 body 或外层容器设为 display: flex、flex-direction: column，再让主内容区用 flex: 1 吃掉剩余空间，footer 自然被“顶”到底部。
-
min-height: 100vh确保容器至少撑满视口，避免 flex 失效 -
footer不需要任何定位，也不依赖固定高度，响应式友好 - 兼容所有现代浏览器，包括 iOS Safari 14.5+，IE11 需加
-ms-flex前缀（若还需支持）
body {
display: flex;
flex-direction: column;
min-height: 100vh;
}
main {
flex: 1;
}
footer {
/* 不设 height，不设 position */
}
sticky footer 在滚动长页面时会失效
position: sticky 的 footer 只在滚动到临界点时吸附，不是真正“永远在最底下”。内容一多，它就跟着滚走了，和需求矛盾。
-
sticky本质是相对定位 + 滚动触发，不是布局工具 - 它的
bottom值只控制“吸附位置”，不保证始终可见 - 在 Safari 中对
footer使用sticky常有渲染延迟或跳动
用 grid 实现更简洁但要注意 IE 兼容性
如果项目不用管 IE，display: grid 是最干净的写法：三行布局，中间用 1fr 占满剩余空间。
-
grid-template-rows: auto 1fr auto中的1fr是关键，它强制中间区域拉伸 - 比 flex 少一层嵌套，
footer不需要额外样式 - IE11 不支持
fr单位，只能回退到 flex 方案
body {
display: grid;
grid-template-rows: auto 1fr auto;
min-height: 100vh;
}
CSS 的 footer 布局问题，核心不在“怎么钉住”，而在“怎么让容器高度可预期”。absolute 看似简单，但只要内容高度变化、设备缩放、字体加载延迟，它就容易露馅。真正可靠的，是用布局模型本身去定义关系，而不是靠定位强行覆盖。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
