position: fixed 是唯一能真正实现广告条“始终贴底、滚动不移”的方案；sticky 依赖父容器滚动边界，内容不足时不可见，键盘弹出时易错位，本就不适用于底部固定场景。
position: fixed 是唯一能真正让广告条“始终贴底、滚动不移”的方案。其他方式如 position: sticky 或 margin + height 模拟，要么行为不可靠，要么在内容少时失效。
为什么不能用 position: sticky 实现底部固定广告
position: sticky 本质是“滚动到某位置后粘住”，它依赖父容器高度和滚动边界，不是真固定在视口底部。常见现象是：页面内容不足一屏时，广告条根本不会出现；内容刚好撑满时，它可能悬在中间；移动端键盘弹出后，它还会错位或消失。这不是 bug，是设计使然——它本就不该用于底部固定场景。
position: fixed 必须配 padding-bottom，否则内容会被遮盖
只写 position: fixed; bottom: 0; left: 0; right: 0; 还远远不够。浏览器不会自动给正文“让位”，结果就是最后一段文字、提交按钮、版权信息全被广告条盖住。
- 必须在
或主内容容器上设置padding-bottom，值 ≥ 广告条实际高度（含内边距、边框） - 推荐用 CSS 变量统一管理，例如：
body { padding-bottom: var(--ad-height, 60px); }，同时广告条设height: var(--ad-height, 60px) - 别用
margin-bottom替代——它不影响布局流，遮挡问题照旧 - 如果广告条高度动态（如含响应式图片），需用 JS 监听 resize 并更新变量，但首次渲染仍要 fallback 到合理默认值
移动端键盘弹出时广告条会“上浮”，怎么压住
iOS 和部分 Android 浏览器在软键盘弹出时会缩放视口、重算 fixed 定位基准，导致广告条被顶到键盘上方。这不是样式错误，是浏览器行为。
- 监听
resize事件，配合节流（如 100ms 内只触发一次），动态重设广告条bottom值 - 更稳妥的做法是：检测
window.visualViewport?.height变化，当它明显小于window.innerHeight时，临时将广告条display: none - 避免在广告条内放
<input>或可聚焦元素——这会主动触发键盘，形成循环干扰 - 确保广告条父级没设
transform或perspective，否则fixed会相对该父级定位，而非视口
真正麻烦的不是写几行 CSS，而是所有“看起来正常”的情况——比如内容刚好一屏高、桌面端测试无误、iOS Safari 模拟器里没问题——上线后在真实安卓机上点输入框，广告条突然飘到半空。这种细节，得在真机+软键盘场景下验证才作数。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
