最可靠方案是flex布局：父容器设min-height: 100vh、display: flex和flex-direction: column，主体容器设flex: 1，footer自然沉底；grid方案用grid-template-rows: auto 1fr auto；禁用position: fixed/absolute以免遮挡内容、破坏可访问性。
用 display: flex 实现 footer 沉底最可靠
现代项目首选这个方案，语义清晰、响应式友好、无需 JS 干预。核心不是“固定” footer，而是让主体区域自动占满剩余空间，把 footer “挤”到底部。
关键点有三个：
– 父容器（如 body）必须设 min-height: 100vh，否则 flex 容器没高度可分；
– 主体内容容器（如 main）加 flex: 1，它才会拉伸；
– footer 不需要任何定位，自然落在 flex 容器末尾。
示例结构：
<body style="display: flex; flex-direction: column; min-height: 100vh;"> <header></header> <main style="flex: 1;">内容</main> <footer>版权信息</footer> </body>
注意：如果 body 外还有包裹层（比如 <div id="app">），那 min-height 和 display: flex 要落到那个外层，而不是 body 自身。
立即学习“前端免费学习笔记（深入）”；
用 display: grid 替代 flex 的适用场景
如果你的页面主结构已经基于 Grid（比如 header / sidebar / main / footer 都是网格项），直接复用 grid-template-rows 更干净，避免嵌套布局。
写法简洁：
body {
display: grid;
grid-template-rows: auto 1fr auto;
min-height: 100vh;
}
其中：
– 第一个 auto 行放 header；
– 1fr 行自动撑满中间剩余空间，放 main；
– 最后一个 auto 行放 footer。
兼容性上，Chrome 66+、Firefox 63+、Safari 16.4+ 均支持良好；IE 完全不支持，需降级方案（如 fallback 到 flex 或旧式负 margin）。
为什么不要用 position: fixed 或 absolute
这两种方式看似“简单粗暴”，但会带来真实副作用：
– position: fixed 让 footer 脱离文档流，永远钉在视口底部，导致：
• 页面内容滚动时被遮挡（尤其表单输入框弹起软键盘时）；
• 打印样式失效（footer 会重复出现在每页底部）；
• 屏幕阅读器无法按正常顺序读取 footer，破坏可访问性。
– position: absolute 依赖父容器设 position: relative，一旦父容器高度计算不准（比如子元素浮动未清除），footer 就会悬空或覆盖内容；更麻烦的是，它无法响应内容高度变化——内容变长时，footer 不会随之下沉，反而可能卡在中间。
一句话：它们解决的是“视觉位置”，不是“布局逻辑”，属于治标不治本。
旧项目里遇到负 margin 方案要小心什么
这种方案靠给 wrapper 设 padding-bottom、给 footer 设 margin-top: -Xpx（X 等于 footer 高度）来实现视觉沉底。它对 IE 友好，但维护成本高：
– footer 高度必须固定且已知，动态内容（如文字换行、响应式字号变化）会导致错位；
– 如果 main 内用了浮动或 flex 子项，wrapper 的高度可能塌陷，padding-bottom 就不起作用；
– 多层嵌套时，负 margin 容易和外边距合并（margin collapse），造成意外空白或重叠。
若必须兼容老浏览器，建议只在降级逻辑中使用，并确保 wrapper 有 overflow: hidden 或伪元素清除浮动，防止高度塌陷。
真正容易被忽略的，是 min-height: 100vh 这个前提——很多人写了 flex 却忘了它，结果在内容少时 footer 依然悬空。这不是代码错了，是布局容器本身没撑开，flex 没空间可分配。
