Проблема с 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

Попробуйте использовать% там, где можете.vw - это процент ширины области просмотра, включая полосу прокрутки, а% - это процент объекта-оболочки, где тело не отображается внутри полосы прокрутки.

• Не используйте контейнер фиксированной ширины (px).Это плохая практика и не будет хорошо отображаться на экранах мобильных устройств.Подробнее см. Адаптивный веб-дизайн.
• Не используйте vw для контейнеров (или баннеров).У него странные эффекты на полосе прокрутки.

Наконец, я не понимаю, почему вы хотите, чтобы что-то было в 300vw или в 3 раза больше ширины области просмотра, но точно.Если вы правильно разработали свою страницу с адаптивным веб-дизайном и избежали установки размеров любой оболочки с помощью px, то не составит труда узнать, какова эта ширина содержащего элемента div.Например, если обертка (содержащая div) находится в 30% области просмотра, и вы хотите, чтобы ваш баннер составлял 300% области просмотра, тогда вы хотите, чтобы 1000% для вашего баннера охватывало ширину трех экранов.

Answer 2

Нет другого способа, кроме как установить ширину полосы прокрутки и вычесть ее из ширины контейнера, используя «чистый CSS».

Вы можете задать ширину полосы прокрутки в браузерах webkit, используя:

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

и установите ширину конуса как:

width: calc(100vw - scrollbarwidthpx);

Вы можете использовать эту статью относительно настройки полосы прокрутки