在移动设备上滚动后，菜单下的空白

Question

我有固定位置的菜单元素，当您单击/触摸变暗区域时，该菜单元素会隐藏。问题是，每当您滚动网站时，该空白都会在菜单隐藏之前出现在菜单下

有问题的屏幕截图：
。

我试图为菜单元素增加更多的高度并设置溢出：隐藏以禁用菜单处于活动状态时的滚动，但这没有帮助。我也试图对此进行搜索，但是对我来说用词来表达准确的问题以找到一些相关的答案或技巧确实非常困难。

Answer 1

我弄清楚了位置：固定的工作原理，并想到了如何解决我的问题的方法。因此，基本上，固定在触摸设备上的位置只能以一种方式起作用（例如：如果您设置 top：0 和 bottom：auto （或 top：0 和底部：0 ），在菜单隐藏之前，底部将有一个空白区域；如果您将底部：0 和顶部：自动设置为会产生相反的效果）。因此，我想到了创建另一个具有相同背景色和相同动画效果但具有 bottom：0 和 top：auto 的图层的方法，以防止在top /菜单的底部。所以基本上，是的，它确实解决了我的问题。也许有人正面临着同样的事情，所以我决定写下这个答案。

Answer 2

感谢@eisbehr教我如何使用它以及一个学得很深的课，我删除了之前的答案。

body {
  margin: 0;
}
.forceHeight {
  position: relative;
  height: 200vh;
  background-color: lightgrey;
}

.menu {
  position: fixed;
  right: 0;
  top: 0;
  bottom: 0;
  background-color: blue;
}

<div class="forceHeight">
  <div class="menu">
    this is your fixed menu
  </div>
  asdf this has a lot of content
</div>