CSS: Стилизация DIV до низа страницы при отсутствии контента

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

Чтобы блок DIV занимал всю высоту видимой области экрана, задайте ему свойство CSS min-height, установив его в 100vh.

div {
  min-height: 100vh;
}

Свойство min-height гарантирует минимальную высоту DIV, равную высоте окна браузера. При этом DIV может расширяться при наличии большего количества содержимого.

Глубокое погружение: Техники и советы

Давайте детально рассмотрим методы, позволяющие блоку div занять всю высоту страницы с учетом особенностей его использования.

Установка исходных условий

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

html, body {
  height: 100%;
  margin: 0;
  padding: 0;
}

Гибкость благодаря Flexbox

Flexbox облегчает управление расположением элементов. Примените display: flex; к родительскому контейнеру, например, к body.

body {
  display: flex;
  flex-direction: column; /* Элементы выстраиваются в колонку */
}

Для основного блока .content установите flex-grow: 1;, чтобы он заполнил все свободное пространство.

.content {
  flex-grow: 1; /* DIV займет все доступное место */
}

Применение сетки CSS Grid

В качестве альтернативы Flexbox вы можете использовать CSS Grid. Превратите body или родительский контейнер в сетку с тремя строками (auto 1fr auto), где центральная строка предназначена для содержимого.

body {
  display: grid;
  grid-template-rows: auto 1fr auto; /* Размеры шапки, содержимого и подвала */
}

Запрет на сжатие содержимого

Необходимо предотвратить сжимание элементов при уменьшении области просмотра.

body > * {
  min-height: 0;
  min-width: 0; /* Элементы не уменьшат свои размеры */
}

Визуальная проверка

Примените background-color или рамку для визуальной проверки, что DIV действительно занимает всю высоту окна браузера. После удостоверения в этом можно удалить эти свойства.

div {
  min-height: 100vh;
  background-color: lime; /* Выделение DIV цветом для проверки */
}

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

Инфографика демонстрирует положение вашего DIV на странице:

Используя описанные методы, вы сможете растянуть ваш контентный блок между заголовком и подвалом, независимо от объема содержимого.

Учет различий между браузерами

Помните, что Flexbox и Grid Layout могут поддерживаться в разных браузерах по-разному. Всегда проверяйте совместимость на специализированных ресурсах, таких как Can I use... Support tables for HTML5, CSS3, etc.

Кроме того, веб-сайты тестовая страница Брунильдо и QuirksMode помогут вам вникнуть в нюансы отображения в разных браузерах.

Практические соображения

В процессе разработки макета не забывайте о важности доступности: иногда пользователи ожидают увидеть подвал в самом низу страницы. Забота о удобстве использования должна быть на первом месте, когда вы стремитесь растянуть DIV на всю высоту страницы.

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

1. Полное руководство по Flexbox | CSS-Tricks – Подробное руководство по работе с Flexbox.
2. Основы CSS-модели коробки – CSS: Каскадные таблицы стилей | MDN – Введение в модель коробки CSS.
3. html – Как сделать height body равным 100% высоты браузера – Stack Overflow – Советы и обсуждения на Stack Overflow.
4. Свойство position в CSS – W3Schools – Информация о свойстве position в CSS.
5. Использование единиц vh во вьюпорте | CSS-Tricks – CSS-Tricks – Об использовании единиц vh.
6. Примеры CSS Grid – Изучение CSS Grid через примеры.
7. Can I use... Support tables for HTML5, CSS3, etc – Проверка совместимости Flexbox.