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-доступно;
}
 

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

Это решение имеет небольшой сбой в Chrome: когда высота браузера увеличивается, высота body остается неизменной, рассинхронизируясь с высотой области просмотра. Кроме того, этот подход решает проблему.

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

Старая школа

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

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

height: 100% к элементу html , тем самым фиксируя его высоту до полной высоты области просмотра.

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

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

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

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

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

минимальной высоте вьюпорта).

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

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

Недостающий путь

Я предлагаю другой способ растянуть body элемент на всю высоту области просмотра без вышеупомянутых проблем. Основная идея заключается в использовании flexbox, который позволяет дочернему элементу растягиваться даже до родительского элемента с нефиксированными размерами, сохраняя при этом возможность дальнейшего роста.

Во-первых, мы применяем 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. Нисколько. Но вы все равно не поддерживаете это, не так ли?

Div не заполняет все тело, когда высота = 100% - HTML и CSS - Форумы SitePoint

нилуфертек316 20 августа 2018 г., 20:59

#1

Прежде чем создавать эту тему, я действительно много искал и видел много похожих тем, но так и не смог решить эту проблему. Извините, если она уже решена.
Мой код похож на приведенный ниже. Когда контент небольшой, он работает корректно, однако, когда я делаю его немного длиннее, div оказывается не на 100% по высоте.

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



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


 не работает


не работает



не работает


не работает


не работает



не работает


не работает


не работает



не работает


не работает


не работает



не работает


не работает


не работает



не работает


не работает


не работает



не работает


не работает


не работает



не работает


не работает


не работает



не работает


не работает


не работает



не работает


не работает


не работает



не работает


не работает


не работает



не работает


не работает


не работает



не работает


не работает


не работает



не работает


не работает


не работает

 div {
    минимальная высота: 100%;
    максимальная ширина: 18,75 см;
    цвет фона: #008000;
 }