position: fixed 在移动端被键盘顶起是因锚定初始 visualviewport 高度，键盘压缩该高度但 fixed 元素不重算位置；min-height 应优先用 100dvh，降级 100vh，必要时 js 动态设置 height；flex 吸底需 html/body 重置、容器为 body 直接子元素、按钮为容器直接子元素；安全区用 env(safe-area-inset-bottom) 并设 fallback。
为什么 position: fixed 在移动端会让按钮被键盘顶起
这不是你 CSS 写错了，是浏览器行为本身如此。position: fixed 锚定的是初始 visualViewport 高度，软键盘弹出会压缩该高度，但 fixed 元素不重算位置，结果就是按钮飘在半空。iOS Safari 和微信 WebView 尤其明显，且 fixed 元素会被屏幕阅读器跳过，无障碍不达标。
min-height: 100vh 在 iOS 上不准，该用什么替代
100vh 包含地址栏高度，实际可视区域更小；100dvh 是更优解，但 Android 旧版 WebView 不支持。稳妥做法是：
- 优先写
min-height: 100dvh - 降级到
min-height: 100vh - 若需精确控制（如表单页），用 JS 动态设
style.height = window.innerHeight + 'px'，并在resize和focus/blur时更新
Flex 吸底结构必须满足的三个硬性条件
漏掉任意一条，按钮就会“浮”起来或错位：
-
html和body必须设margin: 0; padding: 0; min-height: 100%—— 否则min-height: 100dvh失效 - Flex 容器（如
.app）必须是body的直接子元素，不能套在其他未重置 margin 的容器里 - 底部按钮必须是 Flex 容器的**直接子元素**，中间不能嵌套
div或section—— 否则margin-top: auto不生效
移动端安全区和键盘弹出后的微调要点
即使 Flex 结构正确，iPhone X+ 等机型仍可能遮挡按钮，或键盘收起后布局残留偏移：
- 底部容器加
padding-bottom: env(safe-area-inset-bottom)，而不是靠height或margin - 避免对按钮设
flex-shrink: 0—— Safari 对 flex 项默认缩放敏感，会导致窄屏下按钮被压扁 - 如果按钮内有输入框，
focus后别立刻scrollIntoView，加个setTimeout(() => el.scrollIntoView(...), 0)确保渲染完成
box-sizing: border-box、或者忘了 iOS 安全区的 env() 函数需要显式 fallback。前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
