底部固定栏在小屏幕被遮挡时应使用 min-height: 100dvh 替代 100vh，并监听 visualViewport resize 事件防抖处理视口恢复跳变；输入框需在 focus 时调用 scrollIntoView，避免 overflow: hidden 和 transform 模拟 fixed。

底部固定栏在小屏幕被遮挡怎么办

直接用 position: fixed + bottom: 0 在 iOS Safari 或安卓软键盘弹出时大概率失效——不是代码写错了，是浏览器把视口高度重置了。这时候 vh 会按“理论视口”算，但实际可滚动区域变小，导致栏被顶上去或截断。

• 别依赖 100vh 布局整个页面，尤其当底部栏要贴底且页面内容可滚动时
• 用 min-height: 100dvh 替代 100vh（dvh 是动态视口单位，Safari 16.4+、Chrome 105+ 支持）
• 降级方案：监听 resize 事件，用 document.documentElement.clientHeight 动态设容器最小高度

fixed 底部栏盖住输入框光标怎么破

Android 和 iOS 在软键盘唤起时，不会自动滚动到 <input> 光标位置，如果底部栏是 fixed 且高度较大，光标可能被挡住，用户看不见自己在输什么。

• 给输入框加 scrollIntoView({ behavior: 'smooth', block: 'nearest' })，触发时机选 focus 而非 click
• 避免给 body 设 overflow: hidden，否则 iOS 会禁掉自动滚动
• 不要用 transform: translateY() 模拟 fixed 效果——它绕过浏览器对表单元素的焦点滚动逻辑

如何让 fixed 底部栏不随页面滚动抖动

某些安卓机型上，position: fixed 在快速滚动时会出现 1–2px 抖动，本质是浏览器合成层没正确提升该元素。

CSS婚礼策划服务机构宣传网站模板

CSS婚礼策划服务机构宣传网站模板是一款适合提供婚礼策划和婚庆服务机构宣传网站模板下载。提示：本模板调用到谷歌字体库，可能会出现页面打开比较缓慢。

下载

• 强制开启硬件加速：transform: translateZ(0) 或 will-change: transform
• 确保父容器没设 overflow: hidden 或 clip-path，这些会剪裁 fixed 元素的渲染层
• 避免在 fixed 元素里嵌套大量重绘内容（比如实时图表），优先用 contain: layout paint 隔离

要不要用 sticky 替代 fixed

如果底部栏只在页面滚动到底部时才出现，position: sticky 更轻量、无兼容性陷阱，且天然适配软键盘行为；但如果要求“永远可见”，sticky 不行——它依赖父容器高度和滚动边界。

立即学习“前端免费学习笔记（深入）”；

• sticky 的 bottom 值只在父容器高度 > 视口时生效，否则退化为 static
• 想兼顾“始终可见”和“不遮挡输入”，可以结合：默认用 fixed，检测到 visualViewport 高度突变（软键盘弹出）时临时切为 absolute + bottom 计算
• 注意 sticky 在 Safari 旧版本（≤15.6）对 bottom 支持不稳定，建议加 @supports (position: sticky) 条件判断

实际最难调的不是样式，是软键盘收起后视口恢复延迟导致的布局跳变——这个得靠 visualViewport 的 resize 事件配合防抖，而不是等 window.resize。