Нет необходимости в вертикальной прокрутке после использования box-size: border-box

Question

Файл таблицы каскадных стилей

body{ background: #000; padding: 20px; box-sizing: border-box; margin:0; }
.box{ width: 100%; height: 100vh; background: #ff0000; margin:0; padding: 0; }

html файл:

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

Я использовал приведенный выше код, но почему возникает вертикальная прокрутка.

Мне не нужно, потому что я использовал box-sizing:border-box;

Мне нужно пространство вокруг моего бокса без вертикальной прокрутки, а высота должна составлять 100%;

Answer 1

использование height: calc(100vh - 40px)

body{ background: #000; padding: 20px; box-sizing: border-box; margin:0; }
.box{ width: 100%; height: calc(100vh - 40px); background: #ff0000; margin:0; padding: 0; }

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

или добавьте height:100vh к телу, а height:100% к .box

body{ background: #000; padding: 20px; height: 100vh; box-sizing: border-box; margin:0; }
.box{ width: 100%; height: 100%; background: #ff0000; margin:0; padding: 0; }

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

Answer 2

Вы добавили отступ к телу как 20px, который для верха и низа вместе равен 40px, поэтому в основном вам нужно уменьшить (поле или отступ) от него, используя функцию calc(100vh - 40px).
Пример, показанный ниже

Примечание: calc не является кросс-браузерным решением, оно будет работать на всех современных браузерах Подробнее здесь

body{ background: #000; padding: 20px; box-sizing: border-box; margin:0; }
.box{ width: 100%; height: calc(100vh - 40px); background: #ff0000; margin:0; padding: 0; }

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