全屏导航需用 position: fixed + inset: 0（或四边归零）替代 height: 100vh，以规避 ios safari 的 vh 计算缺陷；配合 overflow-y: auto、z-index: 1000、transform 过渡、body 滚动锁定及焦点管理（tab 循环、esc 关闭、焦点回归）实现真正可用的全屏体验。
全屏导航不是加个 height: 100vh 就完事的——它必须真正覆盖整个视口、不遮挡内容又不影响滚动体验，且在移动端能收放自如。否则要么留白、要么切掉底部、要么触发双滚动条。
怎么让导航层真正撑满整个屏幕（含手机）
关键不是靠 height: 100vh，而是用 position: fixed + 四边归零，再配合 inset: 0（现代写法）或显式设置 top/right/bottom/left: 0。这样它才脱离文档流、不随页面滚动，并严格贴合视口边界。
注意点：
-
vh在 iOS Safari 中会把地址栏高度算进去，导致底部被截；fixed+inset: 0绕过这个问题 - 必须加
overflow-y: auto，否则长菜单在小屏上无法滚动 - 别忘了
z-index要足够高（比如z-index: 1000），否则可能被其他组件盖住
点击按钮如何平滑展开/收起全屏菜单
用 CSS transform + transition 实现比操作 height 更可靠：前者可硬件加速，且无需计算内容高度；后者在高度为 auto 时根本没法过渡。
实操建议：
- 初始状态设
transform: translateY(-100%)，展开时改为translateY(0) - 过渡写在
transform上：transition: transform 0.4s cubic-bezier(0.22, 0.61, 0.36, 1) - JavaScript 控制只需切换一个类名，比如
nav-open，不要直接改style - 收起后加
pointer-events: none防止误触（展开时恢复为auto）
如何避免全屏导航干扰页面滚动和焦点管理
全屏菜单激活时，背后页面仍可滚动——这通常不是用户想要的。更糟的是，键盘用户按 Tab 可能跳进不可见区域，或焦点丢失。
解决方案要同步处理两件事：
- 菜单打开时，给
加overflow: hidden（iOS 需额外加position: fixed; top: 0; width: 100%防止页面回弹） - 用 JavaScript 拦截
Tab键，在菜单内循环焦点（只聚焦tabindex="0"或可交互元素），关闭时恢复原焦点 - ESC 键必须关闭菜单，且关闭后焦点应回到触发按钮（用
.focus()）
最常被忽略的是焦点管理——视觉上菜单“盖住了”，但屏幕阅读器和键盘用户仍能穿透。没做焦点约束的全屏导航，在无障碍测试里基本通不过。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
