移动端弹出式菜单链接如何占满视口高度？100vh无效

云原生阿岚

2026-8-23

解决移动端菜单占满视口高度的问题

你设置100vh没效果，核心是当前CSS配置的几个细节问题，调整后就能实现全屏菜单：

关键修改点

移除.menu-items的margin-top:390px，这个值会把菜单向下偏移，导致无法从视口顶部开始填充高度
给.menu-items添加top: 0、left: 0，配合height: 100vh让绝对定位元素完全覆盖视口
确保菜单的父容器（比如<nav>）设置position: relative，避免菜单相对于整个文档错误定位
可以用Flex布局优化菜单项的垂直排列，提升移动端体验

修改后的CSS代码

@media only screen and (max-width: 800px) {
  .menu {     
    width: 100%;
  }
  /* 给父容器设置相对定位，约束子元素的绝对定位 */
  nav {
    position: relative;
  }
  .menu-items {
    display: none; 
    width: 100%;
    height: 100vh;
    background-color: #008378;
    position: absolute;
    text-align: center;
    z-index: 2;    
    top: 0;
    left: 0;
    padding-top: 60px;
    /* 用Flex让菜单项垂直居中分布 */
    flex-direction: column;
    justify-content: center;
    gap: 20px;
  }
}