如何使视口忽略移动设备中Google chrome的地址栏？

Question

我有以下简单的HTML代码段

<div class="module">
  <div>20%</div>
  <div>40%</div>
  <div>60%</div>
  <div>80%</div>
  <div>100%</div>
</div>

和以下CSS：

.module {
  width: 100vw;
  height: 100vh;
  background-color: lightblue;
  font-family: Verdana, Geneva, Tahoma, sans-serif;
  font-size: 3rem;
}

[在大多数展示柜中，它都有100vh和100vw，这是一样的，但是当我在手机的浏览器中打开它时，它看起来很糟糕，地址栏占用了100vh的一部分，导致.module全班下课：

您可以看到最后一个div不在屏幕上，但是我要这样操作：

请帮助我。谢谢

Answer 1

我认为这只是您手机的问题（问题不是Google的地址栏，而是您的底部菜单栏）。但是，由于.module功能，您可以通过这种方式设置calc()高度：

.module {
    height: calc(100% - 50px); //50px is your bottom bar height
}