html - 固定 div 高度 :100% on mobile devices when scrolling doesn't fill screen

Question

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

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

我该如何解决这个问题？ (我也尝试过 height:100vh)。我不想使用 JS 或 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>

基本上，元素不会增加高度来响应更大的视口(viewport)高度。元素高度保持不变，尽管浏览器地址栏消失了(在 Chrome 中)

Answer 1

您可以尝试在 body 中将 overscroll-behavior 设置为 none，更多信息可以在这篇有用的文章中找到: https://www.smashingmagazine.com/2018/08/scroll-bouncing-websites/