如何使用CSS的新视口单位dvh解决移动端fixed导航遮挡痛点？-css教程-PHP中文网

100vh + fixed在移动端必然失效，因其锚定设备物理高度而非当前可视区域，地址栏收起、键盘弹出等均不更新该值；应改用min-height: 100dvh配合flex布局与@supports降级，并规避transform等隐式层叠上下文干扰。

如何使用css的新视口单位dvh解决移动端fixed导航遮挡痛点？

为什么100vh + fixed在移动端必然失效

因为 100vh 锚定的是设备物理高度，不是用户当前可见区域。iOS Safari 地址栏收起、安卓 Chrome 工具栏隐藏、软键盘弹出——这些都会压缩「视觉视口（visual viewport）」，但 100vh 值纹丝不动。结果就是：fixed 底部导航被顶到屏幕中央，或直接被键盘盖住。这不是你 CSS 写错，是单位本身就不该用在这里。

用 `100dvh` 替换容器高度，而非直接修 `fixed`

别试图靠 bottom: calc(100vh - 300px) 这类硬编码去“猜”键盘高度——它不可靠且无法响应变化。正确做法是让整个布局容器适配动态视口：

body 或根容器（如 #app）设 min-height: 100dvh，而不是 height: 100vh
搭配 display: flex; flex-direction: column;，再用 margin-top: auto 把底部导航推到底部（不依赖 position: fixed）
必须加 <meta name="viewport" content="viewport-fit=cover">，否则 Safari 不触发 dvh 动态更新
用 @supports (min-height: 100dvh) 包裹规则，老浏览器自动 fallback 到 min-height: 100vh

遇到微信内置浏览器或旧版 Safari 怎么办

微信浏览器至今不支持 dvh，iOS 15.x 及更早也无此能力。此时不能只靠 CSS：

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

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

下载

监听 focusin 到 <input> 或 <textarea></textarea>，用 setTimeout(() => {}, 0) 确保 DOM 重排完成后再读 window.innerHeight
计算当前可用高度后，给底部容器加临时 class，切换为 position: absolute 并设 bottom: 0（注意：不是 bottom: env(keyboard-inset-bottom)，微信不支持）
blur 后立刻清除内联样式，并恢复 position: relative 或 flex 布局行为
关键防御：每次操作前校验 document.activeElement === targetInput，避免焦点异步转移导致错位

千万别混用 `svh`/`lvh` 和 `dvh`

svh 是最小可能视口（地址栏展开时），lvh 是最大可能视口（地址栏收起后），而 dvh 是当前真实可视高度。三者语义不同，不能互换：

写 height: 100dvh 是为了“贴合此刻用户看到的屏幕”，不是为了“撑满所有可能状态”
env(keyboard-inset-bottom) 是偏移量（单位 px），100dvh 是长度单位（% of current height），二者不能出现在同一 calc() 表达式里
部分安卓 WebView（如华为 EMUI 内置）对 dvh 支持不稳定，需实测；若发现高度跳变，优先降级为 JS + visualViewport API 监听

实际最易被忽略的一点：哪怕用了 100dvh，如果父元素设置了 transform、perspective 或 will-change，iOS 仍会破坏 fixed 定位逻辑——这种隐式层叠上下文干扰，比单位选错更难排查。