包含滚动条宽度的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 - scrollbar width)，或者用一种完全不同的方式来实现我想要的纯CSS呢？

Answer 1

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

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

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

并将conent宽度设置为：

width: calc(100vw - scrollbarwidthpx);

You could make use of this article regarding customizing scrollbar

Answer 2

在可以使用的地方尝试使用%。vw是包括滚动条在内的视口宽度的百分比，%是包装器对象的百分比，其中主体不在滚动条内渲染。

• 不要使用固定宽度(px)容器。这是一种糟糕的做法，在移动屏幕上不能很好地呈现。参见响应式网页设计了解更多信息。
• 不要将vw用于容器(或横幅)。它在滚动条上有奇怪的效果。

最后，我不明白为什么你想要的东西是300vw或3倍的视窗宽度，但可以肯定。如果您使用响应式web设计正确地设计了页面，并避免使用px设置任何包装器尺寸，那么就不难知道包含div的宽度是多少。例如，如果包装器(包含div)位于视区的30%，而您希望横幅占视区的300%，则希望横幅跨过三个屏幕的宽度为1000%。