固定底部按钮遮挡内容的本质是position: fixed脱离文档流导致正文未预留空间，解决方法是给body设置padding-bottom并确保box-sizing: border-box。
固定底部按钮遮挡内容，本质是 position: fixed 脱离文档流后没给正文留出空间——不是按钮错了，是正文不知道“底下有人”。解决它不靠 JS 计算高度，而靠 CSS 主动预留位置。
为什么 position: fixed 一定遮内容？
因为 fixed 元素完全脱离文档流，浏览器渲染正文时根本“看不见”它。哪怕按钮只高 56px，正文也会从视口顶部一直画到底部，最后被按钮盖住最下面一行文字或按钮。
- 常见错误：只写
.btn { position: fixed; bottom: 0; }，没管body或main - 更隐蔽的坑：用
margin-bottom给main留空，但main高度由内容撑开，滚动时留空区域可能错位 - 移动端尤其明显：iOS Safari 键盘弹出后，
fixed按钮常卡在错误位置，再加margin也救不回来
padding-bottom 加在 body 上最稳
直接让整个页面容器（body）自己“垫高”，比在某个子元素上加 margin 更可靠——无论内容怎么变、滚动到哪，底部留空始终存在。
- 按钮高
56px→ 就写body { padding-bottom: 56px; } - 必须配合
box-sizing: border-box（现代 reset 通常已含，但检查下） - 如果按钮有
box-shadow或border，留空值要包含这些视觉高度，别只按height算 - 不要用
min-height替代padding-bottom：后者是真实占位，前者只是最小约束
视口高度变化时按钮位置会漂移？
不是按钮漂移，是 bottom: 0 始终锚定在视口底边，而视口高度本身在变——比如 iOS 键盘弹出、地址栏收起、横竖屏切换。此时仅靠 padding-bottom 不够，得加一层防御。
- 键盘弹出时，iOS Safari 的视口高度会突然缩小，
fixed按钮可能被顶到中间；这时padding-bottom还在原处，但按钮已错位 - 临时解法：监听
resize事件，动态重设body的padding-bottom，但要注意防抖（setTimeout延迟更新） - 更干净的做法：改用
position: sticky+bottom: 0（仅限按钮在容器末尾且容器高度足够时），但兼容性不如fixed - 真要强兼容，就接受“键盘弹出时按钮暂时不可见”，这是 iOS 的固有限制，硬拉它反而导致布局撕裂
真正难的不是写对那几行 CSS，而是判断清楚：这个按钮到底需不需要“永远可见”——如果只是表单提交按钮，沉底（flex）比固定更安全；如果真是导航或购物车，fixed + padding-bottom 是目前最可控的组合，其他方案要么掉兼容性，要么引入 JS 复杂度。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
