100% высоты body в CSS: избавляемся от белых полей

Быстрый ответ

Если вам нужно, чтобы элемент body обозначал всю высоту браузерного окна, обратитесь к свойству min-height с использованием единицы 100vh:

body {
  min-height: 100vh;
  margin: 0;
}

Здесь min-height предпочтительнее использовать, чем height, так как первое даёт возможность контенту расширяться за рамки экрана. Единица vh представляет собой процент высоты видимой области и автоматически подстраивается при её изменении.

Применение каскадности и наследования в CSS

Для того чтобы body отображалось на полной высоте окна браузера, важно правильно использовать принципы каскадности и наследования в CSS. Установите html на 100% высоты, это позволит корректно рассчитывать высоту для body:

html {
  height: 100%;
}
body {
  min-height: 100%;
  margin: 0;
}

Такой подход создаёт основу для дочернего элемента body, и ваш макет будет адаптивной 100% высотой, независимо от объёма контента.

Как справиться с длинным контентом — управление переполнением

Если контент не умещается по высоте в области просмотра, используйте свойство min-height для того, чтобы элемент bodyмог расширяться. Фиксированная height такой возможности не дает:

body {
  min-height: 100vh;
  padding: 0;
}

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

Обеспечение кросс-браузерной совместимости

В области веб-разработки всё ещё очень важно учитывать разное поведение браузеров. Перед использованием vh или vw, проверьте поддержку этих единиц на Can I use. Если вам нужно абсолютное уверенность в отображении, вы можете задать следующие стили:

body {
  position: absolute;
  top: 0;
  right: 0; 
  bottom: 0;
  left: 0;
}

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

Применение возможностей CSS-таблиц

Для динамичных размеров вы можете использовать display: table; для html и display: table-cell; для body:

html {
  display: table;
  width: 100%;
  height: 100%;
}
body {
  display: table-cell;
  min-height: 100%;
}

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

Визуализация

Воспринимайте окно браузера как стакан с водой:

Элемент body заполняется постепенно, как вода наполняет стакан:

🥛<--(пустой) 🥛<--(полный) 💧 🌊

1. Пустой стакан — это начальный размер body.
2. Полный стакан — это body, растянутое до 100% высоты.

Результатом будет body, идеально соответствующее размеру окна:

html, body {
  height: 100%; /* Стакан заполнен! 🌊 */
}

Возникающие трудности и способы их решения

Некорректное управление переполнением

Браузеры могут вести себя по-разному, когда контент выходит за границы области просмотра. Поэтому рекомендуется проверять стили в разных браузерах, чтобы устранить неожиданные эффекты.

Подробнее об этом расскажет наш спикер на видео

Непредсказуемое поведение дочерних элементов

Элементы с процентной высотой могут дисфункционировать, если их родительские элементы заданы через min-height:

.child {
  height: 50%; /* Обратите внимание, что `min-height` может внести коррекции */
}

Поблемы мобильных браузеров

100vh может работать нестабильно на мобильных устройствах из-за изменения размера адресной строки браузера. Для корректировки используйте различные методы с использованием CSS и JavaScript, например, как описано на сайте CSS-Tricks.

Полезные материалы

1. Использование относительных единиц области просмотра | CSS-Tricks — подробное руководство по использованию относительных единиц.
2. height – CSS: Каскадные таблицы стилей | MDN — официальная документация MDN по свойству height.
3. html – Вариабельность работы 100vh в мобильных браузерах – Stack Overflow — обсуждение проблемы с 100vh в мобильных браузерах.
4. Как сделать изображение на весь экран — шаг за шагом к созданию изображений на полную высоту страницы.
5. Способы исправления поведения единицы 100vh на мобильных устройствах | CSS-Tricks — методы коррекции 100vh в браузере iOS Safari и других мобильных браузерах.
6. Проверка поддержки относительных единиц браузером — сайт для проверки поддержки относительных единиц в различных браузерах.