100vw вызывает горизонтальное переполнение, но только если более одного?

Скажите, что у вас есть это:

html, body {margin: 0; padding: 0}
.box {width: 100vw; height: 100vh}

<div class="box">Screen 1</div>

Вы получите то, что заполняет экран, никаких полос прокрутки. Но добавьте еще один:

<div class="box">Screen 1</div>
<div class="box">Screen 2</div>

Вы получаете не только вертикальные полосы прокрутки (ожидаемые), но и небольшую горизонтальную прокрутку.

Я понимаю, что вы можете опустить ширину или установить ее на ширину: 100%, но мне любопытно, почему это происходит. Не предполагается ли 100vw "100% ширины окна просмотра"?

Ответ 1

Как уже объяснялось wf4, горизонтальная прокрутка присутствует из-за вертикальной прокрутки. которую вы можете решить, указав max-width: 100%.

.box {
    width: 100vw;
    height: 100vh;
    max-width:100%;  /* added */
}

Рабочая скрипта

Ответ 2

полосы прокрутки будут включены в vw, чтобы добавить горизонтальную прокрутку, чтобы вы могли видеть ее под вертикальной прокруткой.

Когда у вас есть только 1 коробка, она 100% шириной х 100% высотой. После того, как вы добавите 2, его 100% -ный рост х 200%, поэтому запуск вертикальной полосы прокрутки. Когда запускается вертикальная полоса прокрутки, она затем запускает горизонтальную полосу прокрутки.

Вы можете добавить overflow-x:hidden в body

html, body {margin: 0; padding: 0; overflow-x:hidden;}
.box {width: 100vw; height: 100vh; background-color:#ff0000}
.box2 {width: 100vw; height: 100vh; background-color:#ffff00}

http://jsfiddle.net/NBzVV/

Ответ 3

Обновление: Начиная с версии Chrome 66, я больше не могу воспроизводить поведение, о котором сообщалось в вопросе. Обходной путь не требуется.

Оригинальный ответ

На самом деле это ошибка, о которой сообщается в этом ответе и комментариях выше.

Хотя обходной путь в принятом ответе (добавление .box {max-width: 100%;}) в целом работает, я нахожу примечательным, что в настоящее время он не работает для display:table (протестировано в Chrome). В этом случае единственный обходной путь, который я нашел, - это использовать width:100%.

Сломанная скрипка с display:table
Рабочая скрипка с display:table и width:100%

Ответ 4

У меня была похожая проблема, и я нашел следующее решение с использованием переменных JS и CSS.

JS:

function setVw() {
  let vw = document.documentElement.clientWidth / 100;
  document.documentElement.style.setProperty('--vw', '${vw}px');
}

setVw();
window.addEventListener('resize', setVw);

CSS:

width: calc((var(--vw, 1vw) * 100);

1vw является запасным значением.

Ответ 5

чтобы избавиться от ширины полосы прокрутки, включенной в VW, я должен был сделать это:

html, body {
    overflow-x: hidden;
    height: 100vh;
}

Ответ 6

положить width: 98vw;

и margin-left: 1vw;

чтобы сместить его, так что независимо от того, есть ли у вас прокрутка или нет, у вас есть элемент точно посередине без его пересчета.