Начальная высота элемента тела

Итак, я смотрю этот урок от Кольта Стила (невероятный инструктор, кстати, зацените его), и он показывает, как создавать что-то с помощью flex box. Поскольку он использует тело в качестве гибкого контейнера, он устанавливает высоту тела на:

body {
    min-height: 100vh;
}

какова начальная высота элемента body? Я бы подумал, что тело уже занимает 100% ширины и 100% высоты.


html css flexbox document-body
person Override    schedule 03.03.2021    source источник
comment
Использование min-height: 100vh означает, что минимальная высота <body> будет составлять 100% высоты области просмотра. Без min-height высота тела была бы такой же большой, как блок, содержащий сгенерированный блок.   -  person Tanner Dolby    schedule 03.03.2021
comment
Спасибо, что так быстро ответили! Я понимаю эту часть, но почему это нужно указывать? Потому что цвет фона на теле автоматически занимает всю высоту и ширину области просмотра. Какой была бы высота тела, если бы она не была указана?   -  person Override    schedule 03.03.2021
comment
Без проблем. Его необходимо указать, чтобы убедиться, что гибкий контейнер покрывает 100% высоты области просмотра. Без min-height: 100vh тело будет покрывать только контент в содержащем его блоке (который, скорее всего, не будет составлять 100% высоты области просмотра, если у вас нет большого количества контента). Уберите min-height из своего кода и убедитесь воочию в разнице.   -  person Tanner Dolby    schedule 03.03.2021
comment
Это имеет смысл теперь, когда тело будет охватывать только содержимое, которое оно содержит. Я нашел это где-то еще при переполнении стека. В CSS есть странная вещь, когда фоновый цвет на ‹body› заполняет всю область просмотра, даже если метрики самого элемента не покрывают всю эту область. Если для элемента html не задан фоновый цвет, то это не так. Вот что мешало понять, где на самом деле находится элемент body. Если я установлю другой цвет фона для элемента html, его будет намного легче увидеть.   -  person Override    schedule 03.03.2021
comment
<body> является ближайшим потомком document в дереве DOM. Поэтому, когда вы задаете фоновый цвет для тела, вся страница будет окрашена в этот цвет. Но когда вы используете flex-контейнер, вам нужно min-height: 100vh, чтобы содержимое flex-контейнеров занимало как минимум 100% области просмотра.   -  person Tanner Dolby    schedule 03.03.2021