用 Flexbox 实现粘性页脚最稳妥：设置 html、body 高度为 100%，body 为 column 方向 flex 容器，main 设 flex: 1，footer 自然沉底不遮挡内容。
用 position: fixed 确实能贴底，但会脱离文档流
直接写 position: fixed; bottom: 0; width: 100%; 看似简单，实际会导致页脚盖住正文末尾内容——因为 fixed 元素不占空间，浏览器不会为它预留位置。用户滚动到页面底部时，常发现文字被遮挡，尤其在内容较短的页面上更明显。
常见错误现象：
– 页面高度不足一屏，页脚悬在中间或遮挡正文最后一段
– 滚动到底部后，最后几行文字被页脚压住
– 在移动端 Safari 上出现底部留白或错位
- 如果页面内容永远足够长（比如 CMS 后台），
fixed可用，但需手动给<main>或主体容器加padding-bottom，值至少等于页脚高度 - 若页脚需随内容“自然沉底”（内容少时到底部，内容多时在内容之后），
fixed不适用，得换方案
推荐用 Flexbox 实现真正的“粘性页脚”
现代布局中，最稳妥的方式是让 <body> 或外层容器成为 flex 容器，主内容区域设为 flex: 1 占满剩余空间，把页脚“推”到底部。
html, body {
height: 100%;
margin: 0;
}
<p>body {
display: flex;
flex-direction: column;
}</p><p>main {
flex: 1;
}</p><p>footer {
/<em> 不需要 position: fixed </em>/
}关键点：
– 必须确保 html 和 body 高度为 100%，否则 flex 无高度可分
– main（或你用来包裹主要内容的元素）必须有 flex: 1 或 flex-grow: 1
– footer 默认就在主内容下方，不脱离流，也不遮挡内容
立即学习“前端免费学习笔记（深入）”；
兼容老浏览器？慎用 position: absolute + 最小高度
如果必须支持 IE10 或更低版本，可用绝对定位配合最小高度模拟，但需严格控制结构：
html {
height: 100%;
}
<p>body {
min-height: 100%;
position: relative;
}</p><p>footer {
position: absolute;
bottom: 0;
width: 100%;
}问题在于：
– 必须给 body 设 min-height: 100%，且不能设 height: 100%，否则内容超长时页脚会被卡死在底部不动
– footer 的 top 值无法自动适配，一旦主内容变高，页脚可能重叠
– 手机端 viewport 缩放后容易错位
- 只建议作为兜底方案，且要测试不同内容长度下的表现
- 务必给
body加padding-bottom≥ 页脚高度，避免内容被遮
用 grid 更简洁，但注意 Safari 旧版 bug
CSS Grid 是目前最直观的解法：定义三行，中间一行自动撑满。
body {
display: grid;
grid-template-rows: auto 1fr auto;
min-height: 100vh;
margin: 0;
}说明：
– auto 行适应头部和页脚自身高度
– 1fr 行占据所有剩余空间，强制内容区拉伸
– min-height: 100vh 确保整页至少一屏高
注意：
– Safari ≤ 15.4 对 1fr 在 min-height 容器中的计算有偏差，可能撑不满
– 若页脚有 margin-top: auto 这类 hack，反而在新版 Chrome/Firefox 中失效
页脚“固定在底部”本质是布局策略选择：要遮盖式悬浮，就接受 fixed 的副作用并补 padding；要内容友好型沉底，Flexbox 是当前最稳的路径。别忽略 html 和 body 的高度继承问题——90% 的失败案例，都卡在这两行没写对。
