Javascript 响应菜单视口高度

我在我的响应式网站上添加了一个菜单，只要视口的宽度小于等于714px，它就会弹出

当你点击按钮时，一个菜单从页面的侧面滑出。我似乎无法解决的问题是，我希望菜单是当前视口的高度，而不允许人们向下滚动

以下是目前菜单的详细内容：

---

这可以通过使用视口百分比长度单位来实现：

一个选项是使用

vh

css单元，并指定

body

具有

高度：100vh

我补充说：

body{
  height:100vh;
}

到CSS文件

在使用之前，还应检查

vh

装置的浏览器兼容性。您可以在这里查看：

---

如果您想更具体地使用

高度：100vh规则，您可以从
站点容器菜单
中删除
溢出：隐藏
，并将
高度：100vh
直接添加到
菜单
：


您的菜单链接既有定义的高度
高度：25%
又有填充…不建议这样做，因为这可能会导致意外行为。最好是替换：

<nav class="menu">
   <a href="#one" class="scrolly">Link 1</a>
   <a href="#three" class="scrolly"><strong>Link 2</strong></a>
   <a href="#two" class="scrolly">Link 3</a>
   <a href="#four">Link 4</a>
</nav>



与：









从
a
元素中删除
height:25%
，并将
height:25vh
添加到
li
元素中


我还做了一些其他更改，例如将菜单链接上的
行高
属性更改为
25vh

看一看最新的小提琴，如果有帮助，请告诉我
 是的，但是当菜单没有打开时，网站应该可以滚动。@Narc-我刚刚更新了我的答案，让我知道它是什么样子。@Narc-更多更新，我想这就是你想要的：链接的高度现在是完美的，谢谢。唯一仍然存在的问题是，一旦菜单打开，页面就可以滚动。在我写这篇文章的时候，我正在考虑修改菜单，这样页面可以滚动，但菜单保持不变。我会检查一下情况，然后在这里报告。@Narc-很好，很高兴能帮上忙。由于
transform
css规则的问题，在Webkit浏览器（Chrome）中修复菜单时可能会遇到问题。我建议使用不同的css来管理滑动菜单（可能是一个负边距，它将消除对
转换的需要），或者在最坏的情况下，您可以使用JavaScript来模拟固定菜单（但这是最坏的情况）。
body{
  height:100vh;
}

<nav class="menu">
   <a href="#one" class="scrolly">Link 1</a>
   <a href="#three" class="scrolly"><strong>Link 2</strong></a>
   <a href="#two" class="scrolly">Link 3</a>
   <a href="#four">Link 4</a>
</nav>

<nav class="menu">
  <ul>
    <li><a href="#one" class="scrolly">Link 1</a></li>
    <li><a href="#three" class="scrolly"><strong>Link 2</strong></a></li>
    <li><a href="#two" class="scrolly">Link 3</a></li>
    <li><a href="#four">Link 4</a></li>
  </ul>
</nav>