应给滚动容器（如main）设置padding-bottom等于页脚实际高度，而非body；推荐用css自定义属性联动或inset+margin-bottom方案，避免z-index错乱。
Fixed页脚遮挡正文最后一行的典型表现
页面滚动到底部时，position: fixed 的页脚盖住了正文末尾几行文字，尤其是移动端或小屏幕下更明显。这不是浏览器 bug，而是 fixed 元素脱离文档流后，正文容器根本“不知道”页脚占位，自然不会留空。
为什么只给 body 加 padding-bottom 常常失效
很多人直接在 body 上设 padding-bottom: 60px（假设页脚高 60px），但实际无效——因为 body 高度通常由内容撑开，而 fixed 页脚不参与高度计算，body 的 padding 底部会悬空，对可视区域末尾无约束力。
- 真正需要留空的是「可视区域内滚动内容的底部边界」，不是
body的盒模型底部 - 如果正文用
min-height: 100vh或 flex 布局，body的 padding 更容易被忽略 - 页脚高度若动态变化（比如响应式折叠、字体缩放），写死的
padding-bottom会不准
正确做法：给滚动容器加 padding-bottom，且高度同步页脚
关键不是「谁」加 padding，而是「哪个元素」负责承载滚动内容，并确保其内容区底部和 fixed 页脚顶部对齐。常见结构中，这个容器通常是 main、.content 或直接是 html（当使用 height: 100% 布局时）。
实操建议：
- 确认滚动容器：用 DevTools 检查滚动条所属元素（常为
html或某个div），对其设置padding-bottom - 值必须等于页脚的**实际渲染高度**，推荐用 CSS 自定义属性联动：
:root { --footer-height: 60px; } footer { height: var(--footer-height); } main { padding-bottom: var(--footer-height); } - 若页脚高度响应式变化（如
@media (max-width: 768px)中变为 80px），同步更新--footer-height，padding 自动生效 - 避免在
body上设overflow-y: scroll，否则滚动容器变成body，需给body加 padding —— 但此时html高度可能未占满视口，导致 padding 不触发
更健壮的替代方案：用 margin-bottom + inset 或 JS 监听
纯 CSS 方案在页脚高度不确定时仍有风险。两个补充手段：
- 用
inset替代bottom定位页脚，并配合margin-bottom：footer { position: fixed; inset: auto 0 0 0; /* 等价于 bottom: 0 */ height: 60px; } main { margin-bottom: 60px; }但注意：margin 对 fixed 元素无影响，所以这里margin-bottom必须加在 main 上，且 main 必须是文档流内最后一个块级元素 - JS 动态同步（适合页脚含动态内容）：
const footer = document.querySelector('footer'); const main = document.querySelector('main'); main.style.paddingBottom = `${footer.offsetHeight}px`;记得监听resize和 DOM 变化（如页脚内文字重排）
最易被忽略的是：fixed 页脚若设置了 z-index 过低，可能被正文某些 position: relative 元素覆盖，这时遮挡不是留白问题，而是层叠上下文错乱——先检查 computed z-index 是否合理。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
