position: fixed 的 footer 会遮挡内容，因其脱离文档流不占空间；需为内容区域设置 padding-bottom 或采用 Flexbox/Grid 布局将 footer 推至底部且保持文档流内。
为什么 position: fixed 的 footer 会遮挡内容
直接给 加 position: fixed; bottom: 0; 确实能让它贴底，但页面滚动时内容会从 footer 下方“穿过去”，因为 fixed 元素脱离文档流，不占空间。常见表现是：长页面底部文字被 footer 盖住，用户根本看不到。
- 必须确保主体内容（如
）有足够内边距或外边距，避开 footer 占据的区域 - 推荐配合
padding-bottom使用，值至少等于 footer 的高度（比如padding-bottom: 60px;） - 如果 footer 高度不固定（比如响应式字号变化），用
min-height+calc()更稳妥
用 Flexbox 实现“真底部”（推荐方案）
Flexbox 是目前最可靠、语义清晰的方式：让容器撑满视口，再把 footer 推到底部，且不脱离文档流。关键在父容器设 display: flex; flex-direction: column; 和子元素的 margin-top: auto; 或 flex: 1; 分配剩余空间。
... ...
-
min-height: 100vh是底线，不能只写height: 100vh，否则短页面会被拉伸溢出 -
必须设flex: 1（等价于flex-grow: 1），否则 footer 不会下推 - IE11 对
flex: 1支持不稳定，若需兼容，改用margin-top: auto;在 footer 上
Grid 布局一行代码搞定
CSS Grid 更简洁：定义三行，中间行用 1fr 自适应，footer 自然落到底部。无需调整子元素样式，结构更干净。
body {
display: grid;
grid-template-rows: auto 1fr auto;
min-height: 100vh;
}- 第一行
auto是 header，第二行1fr吃掉所有剩余空间，第三行auto是 footer - 注意：grid 容器默认不继承
min-height，body必须显式设min-height: 100vh - 兼容性上，现代浏览器没问题，但 iOS Safari 14.5 之前对
vh在地址栏展开/收起时有跳变 bug
绝对定位 + padding-bottom 的兜底方案
当项目受限于旧框架、无法改整体布局结构时，可用 position: absolute + 父容器 padding-bottom 组合。它不依赖 flex/grid，兼容性最好，但需手动控制 footer 高度。
立即学习“前端免费学习笔记（深入）”；
body {
position: relative;
padding-bottom: 60px; /* 必须和 footer 高度一致 */
}
footer {
position: absolute;
bottom: 0;
width: 100%;
height: 60px;
}- footer 高度必须是固定值（px/rem），百分比或
em会导致 padding 计算错位 - 如果 footer 内容动态增减（比如多行文本），高度可能撑开，此时必须用 JS 监听并重设
padding-bottom - 移动端键盘弹出时，
vh失效，这个方案反而比 flex/grid 更稳定
实际项目里，优先用 Flexbox；新项目可直接上 Grid；老系统维护就靠绝对定位兜底。真正容易忽略的是：所有方案都依赖 min-height: 100vh（或 100% 配合 html/body 高度链），漏掉这句，整个布局就塌了。
