典型表现是底部按钮被顶至屏幕中间、导航栏塌陷偏移、getBoundingClientRect()值异常；本质是fixed锚定原始视口，而键盘压缩visualViewport.height导致定位错乱。
移动端 fixed 元素被键盘顶起的典型表现
iOS 和部分 Android 浏览器中，position: fixed 元素在软键盘弹出时会“跟着视口上移”，导致按钮错位、遮挡输入框，甚至完全消失。这不是 bug，而是浏览器为保证输入框可见而强制调整 viewport 的行为——但 fixed 元素仍按原始视口尺寸定位，视觉上就“飘”了。
常见现象包括：
- 底部
input+fixed提交按钮，键盘弹起后按钮被顶到屏幕中间 -
fixed导航栏高度塌陷或位置偏移 -
getBoundingClientRect()获取的位置值在键盘弹起前后不一致
为什么 flex 布局能绕过 fixed 的定位失效问题
flex 本身不依赖视口锚点，它基于父容器的布局流计算位置。只要父容器是正常文档流（比如 body 或一个 height: 100vh 的 wrapper），子元素用 margin-top: auto 或 align-items: flex-end 就能稳定“贴底”，且不会受键盘触发的 viewport 缩放影响。
关键区别在于：
立即学习“前端免费学习笔记（深入）”；
-
fixed锚定的是整个视口（viewport），而键盘会动态改变它的visualViewport.height -
flex锚定的是父容器（如一个display: flex; flex-direction: column; height: 100vh的根容器），其高度在键盘弹起时通常保持不变（除非显式监听resize并修改）
用 flex 实现底部固定区域的最小可行代码
核心结构是三层：根容器 → 内容区 → 底部区，全部靠 flex 推导位置：
<body style="margin: 0; height: 100vh;">
<div style="display: flex; flex-direction: column; height: 100%;">
<main style="flex: 1; overflow-y: auto;"></main>
<footer style="flex-shrink: 0;">
<button>提交</button>
</footer>
</div>
</body>注意几个必须项：
- 根容器（
body或外层div）需明确设height: 100vh或100%，否则flex: 1无参照 -
main必须设flex: 1（等价于flex-grow: 1; flex-shrink: 1; flex-basis: 0），才能撑满剩余空间 -
footer要加flex-shrink: 0，防止内容过多时被压缩 - iOS Safari 中，若
body有overflow: hidden，可能阻止键盘弹起时的滚动，慎用
兼容性与边界情况处理
这个方案在 iOS 15+、Android Chrome 90+ 表现稳定，但仍有几个容易忽略的点：
- 页面有
meta viewport的height=device-height会导致100vh在键盘弹起后变小，应改用height=device-height去掉，或直接用100%配合html { height: 100% } - 若底部区域需要“始终悬浮在键盘上方”，仅靠 flex 不够，得监听
focusin事件，临时给footer加transform: translateY(...)微调，但多数场景不需要这么复杂 - 使用
flex: 1后，如果main内部有绝对定位元素，其top: 0仍以main为参考，不是整个屏幕，这点和fixed行为本质不同，要提前确认是否符合交互预期
真正卡住人的往往不是 flex 怎么写，而是没意识到 100vh 在键盘弹起时已经不是“全屏高”了——这时候靠父容器高度守恒比靠视口锚点更可靠。
