底部固定条需用bottom: env(safe-area-inset-bottom)适配iOS安全区，配合viewport声明和focusin/blur事件动态切换fixed/absolute，避免键盘遮挡；sticky仅适用于有高度父容器的列表末尾场景。
底部固定条不能靠 position: fixed 简单一塞就完事——滚动时遮挡内容、iOS Safari 里跳动、键盘弹起后错位，都是高频翻车点。
为什么 position: fixed 底部条在 iOS 上经常“消失”或“错位”
iOS Safari 的视口行为和安卓/桌面完全不同：软键盘弹出时，viewport 高度会动态收缩，但 fixed 元素仍按原始视口计算位置；部分机型还会触发“回弹滚动”，导致 bottom: 0 实际悬空。
- 避免直接写
bottom: 0，改用bottom: env(safe-area-inset-bottom)（适配刘海/圆角） - 必须加
viewportmeta 声明：<meta name="viewport" content="height=device-height, initial-scale=1.0, maximum-scale=1.0, user-scalable=no">，尤其禁用viewport-fit=cover以外的缩放干扰 - 若页面内容高度不足一屏，
fixed条可能被“顶出视口下方”，需配合min-height: 100vh或 JS 动态补高
如何让底部操作条不遮挡输入框（特别是唤起键盘时）
键盘弹出后，fixed 条常把 <input> 盖住，用户无法看到自己输入的内容。这不是 CSS 能单独解决的问题，必须结合事件监听。
- 监听
focusin和blur事件，在input聚焦时临时将底部条设为position: absolute+bottom: 0，并给body加padding-bottom预留空间 - 不要依赖
resize事件——iOS 键盘弹出不触发该事件，应优先用focusin/blur - 简单 fallback：对
input或textarea添加scrollIntoView({ behavior: 'smooth', block: 'nearest' })，确保聚焦时可视区域自动上移
position: sticky 能替代 fixed 吗？什么场景下更稳
sticky 不是“固定在视口底部”，而是“滚动到父容器底边时吸附”，它天然规避键盘弹出错位问题，但适用场景有限。
立即学习“前端免费学习笔记（深入）”；
- 仅当底部条是某个长列表（如
<div class="list">）的最后一个子元素时才有效，且父容器必须有明确高度和overflow-y: auto - 不能脱离文档流，所以无法跨区域悬浮；也不支持
z-index层级穿透（会被同级overflow: hidden截断） - 兼容性够用（Chrome 56+/Safari 15.4+/Firefox 59+），但旧版 Safari 需加
-webkit-sticky
一个轻量、可落地的底部操作条代码模板
以下代码兼顾 Android/iOS 行为，不依赖框架，只用原生 CSS + 少量 JS：
<style>
.bottom-bar {
position: fixed;
bottom: env(safe-area-inset-bottom);
left: 0;
right: 0;
padding: 12px 16px;
background: #fff;
border-top: 1px solid #eee;
z-index: 1000;
/* 防止 iOS 滚动穿透 */
-webkit-overflow-scrolling: touch;
}
/* 键盘弹出时隐藏 */
.body-keyboard-active .bottom-bar {
position: absolute;
bottom: 0;
}
</style>
<p><div class="bottom-bar">
<button onclick="submitForm()">提交</button>
</div></p><p><script>
const body = document.body;
const bar = document.querySelector('.bottom-bar');</p><p>// 监听 input/textarea 聚焦
document.addEventListener('focusin', (e) => {
if (e.target.matches('input, textarea')) {
body.classList.add('body-keyboard-active');
}
});</p><p>document.addEventListener('blur', (e) => {
if (e.target.matches('input, textarea')) {
// 延迟移除，避免 blur/focus 切换过快
setTimeout(() => {
body.classList.remove('body-keyboard-active');
}, 200);
}
});
</script>真正麻烦的不是写几行 CSS，而是不同设备对“底部”的定义不一致——iOS 认为是安全区底部，安卓认为是屏幕物理底部，而用户只希望点一下就提交，别管它怎么算。
