Question

我想在移动设备上制作全屏菜单，但地址栏总是让它看起来很糟糕。

我的菜单有4个相同高度的项目，它们位于fixed。问题是，当用户在移动设备上滚动页面时，页面底部会有一点间隙，用户可以看到导航后面的页面。有没有一个很好的解决方案来解决这个问题？

这是HTML文件：

<nav>
    <div class="menu-item"><a href="#">Menu item1</a></div>
    <div class="menu-item"><a href="#">Menu item2</a></div>
    <div class="menu-item"><a href="#">Menu item3</a></div>
    <div class="menu-item"><a href="#">Menu item4</a></div>
</nav>

和style.css：

.menu-item{
  position: fixed;
  width:100vw;
  height:25vh;
  left:0;
}
.menu-item:nth-child(1){
  top:0;
}
.menu-item:nth-child(2){
  top:25vh;
}
.menu-item:nth-child(3){
  top:50vh;
}
.menu-item:nth-child(4){
  top:75vh;
}

正如您所看到的，vh和height属性使用top单位。

在Chrome中它运行良好，但在iPhone safari和chrome（最近两者）上都没有。

Answer 1

为什么不修复父级并让每个孩子25％：

，而不是像这样修复每个元素

nav {
  /* covers the whole screen so you shouldn't get a gap*/
  position: fixed;
  top: 0;
  bottom: 0;
  left: 0;
  right: 0;
}

.menu-item {
  min-height: 25%;
}

<nav>
  <div class="menu-item"><a href="#">Menu item1</a></div>
  <div class="menu-item"><a href="#">Menu item2</a></div>
  <div class="menu-item"><a href="#">Menu item3</a></div>
  <div class="menu-item"><a href="#">Menu item4</a></div>
</nav>

全屏菜单高度问题，因为地址栏（移动）

1 个答案: