修复 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*/
    }

Fix viewport width in Chrome