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);

You could make use of this article regarding customizing scrollbar

Answer 2

尝试在可能的地方使用％。 vw是包含滚动条的视口宽度的百分比，％是包装对象的百分比，包装对象在滚动条内部未呈现。

请勿使用固定宽度（px）的容器。这是一种不好的做法，并且无法在手机屏幕上很好地呈现。有关更多信息，请参见响应式Web设计。
请勿将vw用于容器（或横幅）。在滚动条上有奇怪的效果。

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

包含滚动条宽度的100vw出现问题

2 个答案: