时间戳

首页 > 解决方案 > 100vw 的问题，包括滚动条宽度

css - 100vw 的问题，包括滚动条宽度

问题描述

我有一个 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 做的事情？

标签： cssscrollbarviewport-units

解决方案

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

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

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

推荐阅读