100 body height: html — Setting body height to 100%

Растягивание тела на всю высоту окна просмотра: недостающий способ

Предположим, вы делаете липкий нижний колонтитул или центрируете некоторый контент относительно области просмотра. Вы хотите растянуть элемент body на всю высоту области просмотра браузера, а также позволить ему расти еще больше, чтобы соответствовать его содержимому. Эта задача наверняка решалась миллион раз, и она должна быть проще простого. Верно? Верно?

Современный способ

Конечно! Применение min-height: 100vh к элементу body должно помочь. Здесь 100vh означает, что начальная высота body займет 100% высоты области просмотра, тогда как использование min-height вместо height позволит элементу body вырасти еще больше, если это необходимо. Разве это не то, что нам нужно?

Ну… Почти. Если мы откроем такую ​​страницу в обычном мобильном браузере (таком как iOS Safari или Android Chrome), она будет прокручиваться независимо от размера ее содержимого.

Причина этого довольно проста. Элементы пользовательского интерфейса в этих браузерах сжимаются после прокрутки, предоставляя дополнительное пространство для фактического содержимого. Высота 100vh соответствует максимально возможной высоте области просмотра . Поскольку начальная высота окна просмотра меньше, элемент body с min-height из 100vh изначально превышает высоту окна просмотра независимо от его содержимого.

Известное решение этой проблемы выглядит следующим образом:

 HTML {
    высота: -webkit-fill-доступно; /* Нам нужно исправить высоту html */
}
тело {
    мин-высота: 100вх;
    минимальная высота: -webkit-fill-доступно;
}
 

Однако теперь нам нужно исправить html высота. Если это так, не должны ли мы использовать более старое, более надежное решение?

Старая школа

Так как мы не могли избежать исправления высоты html , давайте попробуем старый добрый способ, который включает передачу высоты 100% из элемента html .

Применим min-height: 100% к элементу body , где 100% — это полная высота его родителя (а именно, html ). Процентная высота дочернего элемента требует, чтобы его родитель имел фиксированную высоту, поэтому мы должны применить

Поскольку высота элемента html в процентах в мобильных браузерах рассчитывается относительно минимальной высоты области просмотра , вышеупомянутая проблема с прокруткой нас больше не беспокоит!

 html {
    высота: 100%; /* Нам все еще нужно исправить высоту html */
}
тело {
    минимальная высота: 100%;
}
 

Это решение не такое красивое, как 100vh , но оно используется с незапамятных времен, и оно будет работать, это точно!

Ну. .. Не совсем. Судя по всему, градиент, примененный к такому элементу body , будет обрезан на высоте html (другими словами, на высоте вьюпорта, или, если быть точнее, на

Происходит из-за фиксированной html высоты, и неважно 9 ли она0003 высота: 100% или высота: -webkit-fill-available .

Конечно, это можно «исправить», применив градиент к содержимому body , но это просто не правильно . Фон страницы должен применяться к элементу body , а элемент html должен растягиваться к его содержимому. Можем ли мы этого добиться?

Во-первых, мы применяем min-height: 100% к элементу html , чтобы растянуть его на полную минимальную высоту окна просмотра . Затем мы используем display: flex и flex-direction: column , чтобы превратить его в flex-контейнер с вертикальной главной осью. Наконец, мы применяем flex-grow: 1 к элементу body , тем самым растягивая его до высоты html .

Свойство align-self элемента body неявно имеет значение stretch , поэтому ширина body уже соответствует ширине html .

 html {
    минимальная высота: 100%; /* Смотри, это больше не исправлено! */
    дисплей: гибкий;
    flex-направление: столбец;
}
тело {
    гибкий рост: 1;
}
 

Войти в полноэкранный режимВыйти из полноэкранного режима

Теперь и html

, и body могут растягиваться до своего содержимого, и, поскольку мы используем высоту в процентах, никаких проблем с мобильными браузерами нет. Аккуратный!

Примечания

• Должно быть очевидно, что решение на основе flexbox работает для любой глубины. Его можно легко использовать в случаях, когда содержимое рендерится в элемент внутри тела , а не в сам элемент тела . Например, это типичный сценарий для React или Vue.

• Как вы могли заметить, направление главной оси flex-контейнера не должно иметь значения. Я просто думаю, что вертикальная ось в этом случае более элегантна, и я действительно не тестировал другой вариант. Я не понимаю, как это может сломаться, но кто знает.

• Решение на основе flexbox не работает в IE. Нисколько. Но вы все равно не поддерживаете это, не так ли?

 
<голова>
<название>
<стиль>
тело, HTML {
маржа: 0;
заполнение: 0;
высота: 100%;}
div {ширина: 300 пикселей;
цвет фона: зеленый;
    высота: 100%;}



<тело>
<дел>
не работает



не работает


не работает



не работает


не работает


не работает



не работает


не работает


не работает



не работает


не работает


не работает



не работает


не работает


не работает



не работает


не работает


не работает



не работает


не работает


не работает



не работает


не работает


не работает



не работает


не работает


не работает



не работает


не работает


не работает



не работает


не работает


не работает



не работает


не работает


не работает



не работает


не работает


не работает



не работает


не работает


не работает