移动Chrome上的粘性菜单

Question

我在移动设备上有侧边菜单布局错误，这与https://www.w3schools.com/howto/howto_js_sidenav.asp的侧边菜单示例类似。

如果您在移动设备的Chrome上访问上面的链接并打开任何一个菜单示例（屏幕截图1）。然后当你向上滚动以隐藏chrome的地址栏时，在你停止滚动之前，菜单底部会有一个空白的间隙（截图2）

我能弄清楚的唯一方法是将height: 100%; overflow: auto添加到html和body。然而，这会给我带来一些其他问题。有没有其他方法可以解决它？

Answer 1

在大多数情况下，

height: 100vh和posotion: fixed对我有用：

:root {
  --nav-width: 300px;
}
* {
  box-sizing: border-box;
}
html, body {
  margin:0;
}
div {
  padding: 15px;
}
.nav {
  background-color: goldenrod;
  height: 100vh;
  position: fixed;
  width: var(--nav-width);
}
.content {
  margin-left: var(--nav-width);
  height: 3000px;
  background-color: lightgreen;
}

<div class="nav">
  <h3>I'm nav</h3>
</div>
<div class="content">
  <h3>I'm content</h3>
</div>

Answer 2

从this answer开始，在iPad上测试后，您需要对.sidenav进行以下更改

.sidenav {
    -webkit-transform: translateZ(0);
    height: 110%; 
...
}

Demo