用 position: fixed 实现底部悬浮栏需设 bottom: 0、left: 0 和 width: 100%，并加 z-index 防遮挡；注意 iOS 键盘弹出时遮挡输入框，可聚焦时隐藏；Android 4.4 WebView 兼容性差，必要时降级为 absolute + scroll 监听。
用 position: fixed 实现底部悬浮栏
直接给操作栏容器加 position: fixed + bottom: 0 就能贴底悬浮，但要注意它会脱离文档流，不占空间，也不随滚动条移动——这正是“悬浮”的本质。
常见错误是只写 bottom: 0 却忘了设 left 或 right，导致元素宽度塌缩成内容宽，甚至被截断；或者没加 width: 100%，结果只浮在左下角一小块。
-
position: fixed必须配合bottom: 0和left: 0（或right: 0）才可靠 - 加
width: 100%让它铺满视口宽度；若要留边距，改用left: 16px+right: 16px - 记得设
z-index（比如z-index: 100），否则可能被其他 fixed 元素盖住 - 如果页面有
padding-bottom的 body 或主容器，fixed 元素不会自动避开——它只认视口底边
避免遮挡页面内容（尤其是移动端）
fixed 底部栏会盖在原页面内容上，尤其在 iOS Safari 中，键盘弹出时可能把输入框顶到栏下面，用户看不见自己打的字。这不是 bug，是 fixed 行为的自然结果。
解决思路不是“让栏跟着滚”，而是控制它的出现时机或留出安全空间：
立即学习“前端免费学习笔记（深入）”；
html-to-pptx-converter
下载
使用 PptxGenJS 和 Python 解析，将结构化的 HTML/CSS 幻灯片内容转换为原生、可编辑的 PowerPoint（.pptx）演示文稿。
- 对表单页，可在聚焦
input或textarea时临时隐藏栏：document.activeElement.tagName === 'INPUT'判断 + 切换display: none - 用
@media (max-height: 600px)降低栏高度或字体，适配小屏 - 不依赖
vh做高度计算，iOS 上100vh在地址栏收起/展开时会跳变 - 若用 Vue/React，别把栏写在滚动容器内部，必须挂到
body直接子级，否则父容器overflow: hidden会裁掉它
兼容老版 Android WebView 的注意事项
Android 4.4 内置 WebView 对 position: fixed 支持不稳：滚动时栏可能闪烁、错位，甚至卡在半空。这不是 CSS 写错了，是渲染引擎限制。
绕过方式有限，优先选轻量方案：
- 避免在 fixed 元素里放复杂动画或 transform，容易触发重绘失效
- 加
transform: translateZ(0)强制硬件加速（仅对部分机型有效） - 不要用
will-change: transform，老 WebView 会直接崩溃 - 真要兼容到 Android 4.x，可降级为
position: absolute+ 监听scroll手动更新top，但性能差、有延迟，只作保底
HTML 结构和最小可行样式示例
结构越简单越稳，别套多层 wrapper。以下是最小可运行片段：
<div id="action-bar" style=" position: fixed; bottom: 0; left: 0; width: 100%; background: #fff; border-top: 1px solid #eee; padding: 12px 16px; z-index: 100; box-sizing: border-box; "> <button onclick="doSubmit()">提交</button> <button onclick="goBack()">返回</button> </div>
关键点：box-sizing: border-box 确保 padding 不撑宽；border-top 比 border-bottom 更可靠（避免和屏幕底边重叠）；内联样式只是演示，实际请抽离到 CSS 文件中。
真正麻烦的从来不是“怎么让它浮起来”，而是“它浮起来之后，页面其他部分还是否可用”。每次加 fixed 元素前，先想清楚它和键盘、滚动、视口变化、第三方 SDK（比如微信 JS-SDK 的分享按钮）之间会不会打架。
