固定 div 高度：移动设备上滚动未填满屏幕时为 100%

Question

我有一个响应式nav 元素。 nav 是 position:fixed。当点击它有top:0 bottom:0（我也试过高度：100%）left:0 and right:0。因此，nav 元素覆盖了整个屏幕。

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

我该如何解决这个问题？ （我也试过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>

基本上，元素的高度不会增加以响应较大的视口高度。元素高度保持不变，尽管浏览器地址栏消失（在 Chrome 中）

Answer 1

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

Answer 2

您的 html 是否包含视图标签？ 类似的东西：

<meta name="viewport" content="initial-scale=1, maximum-scale=1">

然后是 min-height 。使用应用容器 div 也是一个不错的选择。

一般来说，如果它是移动的，那么你最好有一个 app-container div，比如：

html, body {
  min-height:100%;
  height:100%;
}

#app-container {
  position:absolute;
  overflow:hidden;
  top:0;   left:0;
  bottom:0; right:0;
}

nav {
  position:fixed;
  top:0;  left:0;
  min-height:100%;
  background:#123;
}

<div id="app-container">
  <nav>
    <ul><li>something</li></ul>
  </nav>
</div>

这可能会有所帮助：http://coderchronicles.org/2016/04/12/create-a-full-screen-layout-for-mobile-web-apps/

Answer 3

固定位置元素固定在视口上。所以top和bottom 0的固定元素固定在视口的顶部和底部。

不幸的是，当移动设备上的视口发生变化（地址栏缩小时）固定位置的元素没有响应。