修复 Chrome 中的视口宽度

Question

我有这个代码：

body
{
  margin: 0;
  overflow-y: scroll;
}

.cont
{
  width: 100vw;
  height: 100vh;
  background-color: #000;
}

<div class="cont"></div>
<br>

Chrome（和其他具有相同引擎的浏览器）会忽略垂直滚动条的宽度。

我该如何解决？

谢谢！

Answer 1

因为 vw/vh 单位在调整大小时会考虑整个视口的大小，而不会考虑滚动条的宽度。一个简单的解决方法是将 .cont 元素的最大宽度限制为不超过文档的宽度。

    .cont
    {
      width: 100vw;
      height: 100vh;
      background-color: #000;
      max-width: 100%; /*limit width*/
    }