css - 修复 Chrome 中的视口(viewport)宽度

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单位在调整大小时考虑了整个视口(viewport)的大小而没有考虑滚动条的宽度。一个简单的解决方法是将 .cont 元素的最大宽度限制为不超过文档的宽度。

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