position: fixed是唯一可靠方案，需设bottom: 0、left: 0、right: 0，配合padding-bottom预留空间、z-index避让遮挡，并处理ios安全区与键盘错位问题。
用 position: fixed 是唯一靠谱的方案
想让广告始终停在浏览器底部、滚动不消失，position: fixed 是唯一稳定的选择。别碰 position: sticky——它依赖父容器高度和滚动边界，底部“粘住”基本不可控；也别用 position: absolute，只要父级加了 transform、perspective 或 overflow: auto，广告立刻脱离视口、跟着滚动跑。
必须写全这三句：bottom: 0（不能只设 top）、left: 0、right: 0。只写 width: 100% 容易因盒模型计算误差导致左右留白。
记得加 z-index: 1000 以上，否则可能被 Modal、Drawer 或视频控件盖住——原生 <video></video> 和 <iframe></iframe> 天然处于最高层，CSS 无法穿透。
主内容不被遮挡的关键是预留 padding-bottom
fixed 元素脱离文档流，不会自动推高正文。用户一滚动就发现提交按钮被盖住，不是样式没写对，是你没给内容“腾地方”。
最稳妥的做法是在 或主容器上设 padding-bottom，值等于广告高度（含内边距、边框）。例如广告总高 60px，就写：padding-bottom: 60px。
- 别用
margin-bottom，它不影响滚动区域高度，JS 获取scrollHeight可能出错 - 如果广告高度响应式变化（比如移动端缩放），就得用 JS 同步更新
padding-bottom，纯 CSS 搞不定 - 若用 CSS 变量管理高度（如
--ad-height: 60px），记得在body的样式里也引用它，避免手动维护两处
iOS 键盘弹出时底部广告错位怎么办
iOS Safari 软键盘弹出会强制重算视口，fixed 元素常被顶到顶部甚至消失。这不是 bug，是 WebKit 的限制行为。
纯 CSS 无解，必须靠 JS 监听并节流：
将 Markdown 文章转换为微信公众号兼容的纯 HTML 格式。当用户要求"转成微信格式"、"生成公众号文章 HTML"、"排版到微信草稿箱"、"微信粘贴格式"时触发。输出带内联样式的纯 HTML，微信编辑器可直接渲染，无需额外适配。支持标题、段落、列表、粗体、行内代码、表格、引用块、代码块、配图的完整转换。
let resizeTimer;
window.addEventListener('resize', () => {
clearTimeout(resizeTimer);
resizeTimer = setTimeout(() => {
document.body.style.paddingBottom = getComputedStyle(document.documentElement).getPropertyValue('--ad-height');
}, 100);
});
注意点：
- 不用
orientationchange，它不触发键盘场景 - 节流必须做，否则频繁
resize会卡顿 - 更精准的做法是监听
focusin/focusout，仅当输入框聚焦且window.innerHeight明显变小时才调整，但简单项目用上面的 resize + 节流已覆盖 90% 场景
移动端适配安全区和防误触
直接写 bottom: 0 在 iPhone 上大概率被底部导航栏或虚拟按键遮住。iOS 有 env(safe-area-inset-bottom) 提供安全间距，应配合像素偏移使用：
bottom: calc(24px + env(safe-area-inset-bottom));
同时提供 fallback：
bottom: 24px; bottom: calc(24px + env(safe-area-inset-bottom));
移动端建议加大间距防误触：@media (max-width: 768px) { bottom: 80px; }。禁用 %、vh、rem 等单位——iOS 对这些在 fixed 元素上的解析不稳定，键盘弹出后容易跳变。
最后别忘了可访问性：加 role="region" 和 aria-label="底部推广广告"，否则屏幕阅读器用户会困惑这个悬浮块是什么。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
