Почему vw включает полосу прокрутки в качестве части окна просмотра?

Я пытаюсь создать веб-сайт с большим количеством ящиков одинаковой ширины и высоты. Например, у меня есть страница с 2 равными размерами бок о бок.

Простым решением было установить ширину и высоту до 50vw. Это отлично работает, пока не появится полоса прокрутки. Я много раз работал в Googled и не мог понять, почему на земле vw и vh будут включать полосы прокрутки в качестве части окна просмотра.

Вот пример моей проблемы

HTML

<div class="container">
    <div class="box red"></div>
    <div class="box green"></div>
</div>
<div class="lotta-content"></div>

CSS

body {
    margin: 0;
    padding: 0;
}

.container {
    width: 100vw;
}

.box {
    float: left;
    width: 50vw;
    height: 50vw;
}

.red {
    background-color: red;
}

.green {
    background-color: green;   
}

.lotta-content {
    height: 10000px;   
}

Обратите внимание на нежелательную горизонтальную полосу прокрутки

https://jsfiddle.net/3z887swo/

Одним из возможных решений было бы использовать проценты для ширины, но vw для высоты, но это никогда не будет идеальной коробкой, которая не самая худшая вещь в мире, но все же не идеальная. Здесь образец

https://jsfiddle.net/3z887swo/1/

Кто-нибудь знает, почему vw/vh включают полосы прокрутки в качестве части окна просмотра? Кроме того, если у кого-то есть лучшее решение, чем у меня, я бы хотел его услышать. Я ищу чистое решение CSS. У меня скорее нет javascript.

Ответ 1

Было бы удобно, если бы единицы просмотра не ~~включали~~, вызывая полосы прокрутки, но в конце концов это размер экрана (экрана). Взгляните на это решение с помощью псевдоэлемента:

http://www.mademyday.de/css-height-equals-width-with-pure-css.html

Делает для квадрата в вашем примере также:

https://jsfiddle.net/3z887swo/4/

.box {
    float: left;
    width: 50%;
}

.box::before {
    content: "";
    display: block;
    padding-top: 100%;
}

Изменить - если кому-то интересно, почему это работает (вертикальное заполнение в ответ на исходную ширину элемента)... это в основном так, как это определено в спецификации:

Процент рассчитывается относительно ширины сгенерированного блока, содержащего блок, даже для "padding-top" и "padding-bottom".

http://www.w3.org/TR/CSS2/box.html#padding-properties

После того, как я наткнулся на мой собственный ответ, я думаю, что он нуждается в некоторой доработке. семантическая неоднозначность - вот почему я заменил слово "включить" на "причина" сверху. Поскольку это больше факт, что единицы vw принимают во внимание только размер области просмотра - не включая полосу прокрутки и не вызывает переполнение и полосу прокрутки в другом направлении, когда его ширина добавляется к 100vw (делая общее пространство, которое необходимо, область просмотра плюс ширина полосы прокрутки, превышающая экран).

Как и в случае с этим вопросом, лучший способ обработки юнитов vw, скорее всего, избегать их, если вы можете, потому что они просто не очень совместимы с настольным браузером (у которого нет накладывающихся полос прокрутки).

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

Ответ 2

У меня есть другой ответ, и я чувствую необходимость делиться своим разочарованием

ПОТОМУ ЧТО СТАНДАРТНЫЕ МАШИНЫ СТУПИДЫ

(вообще, комитеты всегда)

Одним простым способом является сохранение полосы прокрутки всегда вокруг и ее рассмотрение

html,body {margin:0;padding:0}
html{overflow-y:scroll}

(используйте overflow-x для макета, который использует vh)

Я считаю, что они серьезно напортачили пух на этом.

Ответ 3

html { overflow-x: hidden; }

похоже, работает