解决iPhone顶部栏导致100vh菜单无法全屏覆盖的问题

针对你遇到的iPhone上菜单无法填满屏幕顶部、露出绿色背景的问题，给你几个实用的解决办法：

方法一：使用动态视口高度单位100dvh #

iOS里的100vh是基于浏览器可视区域计算的，不包含顶部状态栏和底部导航栏的高度，换成100dvh就能适配设备的完整屏幕高度：

background: red;
position: fixed;
z-index: 9;
top: 0;
left: -100vw;
width: 100vw;
max-width: 100%;
height: 100dvh; /* 替换原有的100vh */

方法二：用inset属性替代top+height设置 #

inset: 0可以让fixed定位的元素自动填满整个视口，不需要单独设置top、height属性，适配更稳妥：

background: red;
position: fixed;
z-index: 9;
left: -100vw;
width: 100vw;
max-width: 100%;
inset: 0; /* 覆盖top、right、bottom、left为0，自动填充满整个视口 */

辅助设置：调整viewport meta标签 #

在HTML的<head>里添加或修改viewport配置，让页面能延伸到设备的安全区域：

<meta name="viewport" content="width=device-width, initial-scale=1.0, viewport-fit=cover">

viewport-fit=cover会允许页面内容覆盖设备的状态栏、刘海等区域，配合上面的CSS就能彻底解决顶部露出背景的问题。

如果需要兼容旧版浏览器，可以给height属性加降级写法：

height: 100vh;
height: 100dvh;

内容的提问来源于stack exchange，提问作者in2d