底部固定悬浮条应使用 position: fixed 并设 bottom: 0、left: 0、right: 0；需在 body 或主容器设 padding-bottom 避免遮挡内容；移动端键盘弹出时须用节流 resize 事件动态调整；必须添加 role="region" 和 aria-label 保障可访问性。
底部固定悬浮条用 position: fixed 最直接
想让一条内容始终贴在浏览器窗口最下方、滚动不消失，position: fixed 是唯一可靠方案。它脱离文档流，基于视口定位，和页面滚动完全无关。
常见错误是误用 position: sticky —— 它依赖父容器高度和滚动边界，底部“粘住”行为极难精准控制，多数情况下会失效或错位。
- 必须设置
bottom: 0（不能只设top） - 推荐加
left: 0; right: 0;让宽度撑满整个视口 - 若父容器有
transform或perspective，会创建新的定位上下文，导致fixed相对父容器而非视口——此时需移除这些样式或调整层级
避免遮挡页面内容，需要预留底部安全间距
悬浮条盖住页面最后一段文字或按钮，是上线后最常被用户投诉的问题。这不是样式没写好，而是没给正文留出足够空间。
最稳妥的做法是在 <body> 或主内容容器上加 padding-bottom，值等于悬浮条高度（含内边距、边框）。
立即学习“前端免费学习笔记（深入）”；
Article To Html
下载
文章转信息图。将文章/笔记转化为手机可读的 HTML 信息图，自动匹配视觉风格。触发场景：文章转图、笔记转图、信息图、转小红书图、做张图、可视化这篇文章、文生图。
- 例如悬浮条高
60px，就在body上设padding-bottom: 60px - 不要依赖
margin-bottom，它无法防止内容被遮盖 - 如果用 CSS 变量管理高度（如
--bar-height: 60px），记得同步更新padding-bottom值
移动端键盘弹出时悬浮条错位，得监听 resize 事件
iOS Safari 和部分安卓浏览器在软键盘弹出时，会缩放视口或改变 window.innerHeight，导致 fixed 元素位置偏移甚至消失。
纯 CSS 无解，必须靠 JS 拦截视口变化：
let resizeTimer;
window.addEventListener('resize', () => {
clearTimeout(resizeTimer);
resizeTimer = setTimeout(() => {
document.body.style.paddingBottom = getComputedStyle(document.documentElement).getPropertyValue('--bar-height');
}, 100);
});
- 不能用
orientationchange，它不触发键盘场景 - 节流是必须的，否则频繁 resize 会卡顿
- 仅在检测到输入框获得焦点且视口高度明显变小时才做适配更精准，但简单项目用
resize+ 节流已覆盖 90% 场景
悬浮条内容需可访问，别忽略 role="region" 和 aria-label
屏幕阅读器默认不会宣布 fixed 元素，尤其当它不在 DOM 顺序末尾时，视障用户可能完全感知不到它的存在。
补救很简单，但极易被跳过：
- 给悬浮条容器加上
role="region"，明确语义类型 - 添加
aria-label="快捷操作栏"（按实际功能命名） - 确保内部按钮有
aria-label或可见文本，禁用display: none隐藏关键操作
这个细节不影响视觉效果，但决定了功能是否真正可用——尤其当悬浮条承载“立即咨询”“一键拨号”等关键入口时。
