100vw 的问题，包括滚动条宽度答案

【问题标题】：Issue with 100vw including scrollbar width100vw 的问题，包括滚动条宽度
【发布时间】：2018-10-12 10:06:12
【问题描述】：

我有一个 div 需要在父 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 做的事情？

【问题讨论】：

可能重复stackoverflow.com/questions/51655759/…
您能描述一下您想要实现的目标吗？你想让横幅溢出吗？
你为什么要使用 vw 而不是百分比？
只是把overflow-x:hidden放在身上？
@Temani Afif – 是的，我希望横幅溢出，使其成为全屏宽度。

标签： css scrollbar viewport-units

【解决方案1】：

除了设置滚动条宽度并使用“纯 CSS”将其从容器宽度中减去之外，别无他法。

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

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

并将内容宽度设置为：

width: calc(100vw - scrollbarwidthpx);

You could make use of this article regarding customizing scrollbar

【讨论】：

【解决方案2】：

尽量使用 %。 vw 是包括滚动条在内的视口宽度的百分比，% 是包装对象的百分比，其中主体不在滚动条内呈现。

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

最后，我不明白为什么您希望某些东西的宽度为 300vw 或视口宽度的 3 倍，但可以肯定。如果您使用响应式网页设计正确设计了页面，并避免使用 px 设置任何包装器的尺寸，那么不难知道包含 div 的宽度是多少。例如，如果包装器（包含 div）位于视口的 30%，并且您希望横幅占视口的 300%，那么您希望 1000% 的横幅跨越三个屏幕的宽度。

【讨论】：