应使用 dvh/dvw 替代 vh/vw 解决全屏下 fixed 元素偏移问题；dvh 自动排除地址栏等可折叠 UI，Chrome 105+、Firefox 112+、Safari 16.4+ 已支持，兼容方案可用 @supports 或 fullscreenchange 动态设置 CSS 变量。
全屏模式下 fixed 元素位置偏移，本质是浏览器在进入全屏（requestFullscreen）后，viewport 尺寸未及时反映状态栏、地址栏、工具栏的隐藏或显示变化，导致基于 vh/vw 的计算仍按“非全屏”视口进行，而 position: fixed 又严格相对于当前 viewport 布局——二者错位就发生了。
dvh/dvw 替代 vh/vw
Chrome 105+、Firefox 112+、Safari 16.4+ 已支持动态 viewport 单位：dvh（dynamic viewport height）自动排除地址栏/底部导航栏等可折叠 UI；dvw 同理适用于宽度方向。
top: 20vh;
top: 20dvh;
@supports (height: 100dvh) 做渐进增强当 dvh 不可用或需精确控制时，可在 fullscreenchange 事件中读取 document.documentElement.clientHeight 动态设置 CSS 变量：
document.addEventListener('fullscreenchange', () => {
const h = document.documentElement.clientHeight;
document.documentElement.style.setProperty('--full-height', `${h}px`);
});.my-fixed {
top: calc(var(--full-height) * 0.2); /* 20% 高度 */
}比如用 top: 50%; transform: translateY(-50%) 在全屏下也可能不准——因为 50% 是相对于初始 viewport 高度计算的，而全屏后元素尚未重排。
立即学习“前端免费学习笔记（深入）”；
inset + margin 或 flex 容器更稳定resize 事件二次校准will-change: top 提升渲染优先级基本上就这些。核心是别把 vh 当“绝对真实高度”用，尤其在全屏、横竖屏切换、PWA 地址栏收起等场景——dvh 是目前最轻量可靠的解法，不复杂但容易忽略。
以上就是css fixed元素在全屏模式中位置不准怎么办_根据viewport单位vh/vw重新计算定位基准的详细内容，更多请关注php中文网其它相关文章！
每个人都需要一台速度更快、更稳定的 PC。随着时间的推移，垃圾文件、旧注册表数据和不必要的后台进程会占用资源并降低性能。幸运的是，许多工具可以让 Windows 保持平稳运行。
广告Copyright 2014-2025 https://www.php.cn/ All Rights Reserved | php.cn | 湘ICP备2023035733号
265
收藏
