固定的div高度:滚动不满屏幕时在移动设备上为100％

我有一个响应式 nav 元素. nav 是 position:fixed .单击时，它具有 top:0 bottom:0 (我也尝试过height:100％) left:0和right:0 .因此nav元素会覆盖整个屏幕.

I have a responsive nav element. The nav is position:fixed. When clicked it has top:0 bottom:0 (I've also tried height:100%) left:0 and right:0. Hence the nav element overlays the entire screen.

但是，如果我在移动设备上向下滚动，浏览器地址栏(iPhone上的Safari和Chrome)会变短或消失，从而使视口变高.但是nav元素的高度保持不变，这意味着它不再覆盖整个屏幕，并且底部有一个条带显示了后面的内容.

However on mobile devices if I scroll down, the browser address bar (Safari and Chrome on my iPhone) gets shorter or disappears all together - making the viewport higher. Yet the height of the nav element stays the same, meaning that it no longer covers the full screen and there is a strip at the bottom showing the content behind.

我该如何解决?(我也尝试过 height:100vh ).我不想使用JS或JQ.

How do I resolve this? (I've also tried height:100vh). I don't want to use JS or JQ.

谢谢

nav {
position:fixed;
top:0;
bottom:0;
left:0;
right:0;
background-color:black;
}


<nav>
    <ul>
        <li><a href="about.html">About</a></li>
        <li><a href="services.html">Services</a></li>
        <li><a href="workshops.html">Workshops</a></li>
        <li><a href="blog.html">Blog</a></li>
        <li><a href="contact.html">Contact</a></li>
    </ul>
</nav>

基本上，该元素的高度并未增加，无法响应较大的视口高度.元素高度保持不变，尽管浏览器地址栏消失了(在Chrome中)

Basically the element is not growing in height to respond to the larger viewport height. The elements height is staying the same, dispite the browser address bar disappearing (in Chrome)