100vw（包括滚动条宽度）的问题

Question

我有一个 div 需要在具有限制的父 div 内为全屏宽度。简单来说，就是这样：

HTML：

<div class="container">
  <div class="banner">
  </div>
</div>

CSS：

.container {
  width: 1170px;
  margin: auto;
}
.banner {
  width: 100vw;
  margin-left: calc( 50% - 50vw);
}

工作正常，除了一件事：页面上的滚动条覆盖了子 div 中的一些内容，因为 100vw 看起来包括滚动条宽度。那么有没有办法解决这个问题，以便我可以将宽度设置为（100vw - 滚动条宽度），或者也许是一种完全不同的方式来实现我想要用纯 CSS 做的事情？

Answer 1

您可以设置滚动条宽度并使用“纯 CSS”从容器宽度中减去它。

您可以使用以下方法为 webkit 浏览器中的滚动条指定宽度：

body::-webkit-scrollbar {
 width: scrollbarwidthpx;
}

并将内容宽度设置为：

width: calc(100vw - scrollbarwidthpx);

您可以利用这篇关于自定义滚动条的文章

Answer 2

尽可能使用%。 vw 是包括滚动条在内的视口宽度的百分比，而 % 是不会被滚动条混淆的包装对象的百分比。

总体来说：

• 不要使用固定宽度 (px) 的容器。这是不好的做法，并且不会在移动屏幕上很好地呈现。有关更多信息，请参阅响应式网页设计。
• 不要将 vw 用于容器（或横幅）。它对滚动条有奇怪的影响。