CSS: как заставить дочерний div наследовать высоту родителя

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

Для наследования вложенным элементом параметра min-height родительского элемента, примените к родителю display: flex; и к потомку — flex: 1;. При этом дочерний элемент полностью заполнит высоту родителя, даже если его высота не была задана явно.

.parent {
  display: flex; /* Эпоха гибкости */
  min-height: 100vh; /* Минимальная высота не менее размера окна просмотра */
}

.child {
  flex: 1; /* Разверни крылья, молодой */
}

<div class="parent">
  <div class="child">
    Содержимое
  </div>
</div>

Подобное решение активирует все преимущества flexbox, обеспечивая гибкость при управлении высотой.

Альтернативные варианты наследования min-height

Изучим иные методы, позволяющие дочернему элементу наследовать min-height от родительского.

Позиционирование на помощь

Чтобы родитель передал потомку всю свою высоту, можно применить position: relative; к контейнеру и position: absolute; к вложенному элементу.

.parent {
  position: relative; /* Становится отправной точкой для потомка */
  min-height: 100vh; /* Высота не меньше размера окна просмотра */
}

.child {
  position: absolute; /* Занимает пространство родительского блока как относительного */
  top: 0;
  left: 0;
  width: 100%; /* Занимает всю ширину родителя */
  height: 100%; /* И всю его высоту */
}

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

Уважение к традициям табличной верстки

Для старых браузеров с ограниченной поддержкой flexbox можно эмулировать табличную верстку используя свойства display: table; и display: table-cell; для родителя и потомка соответственно.

.parent {
  display: table;
  min-height: 100vh;
  width: 100%;
}

.child {
  display: table-cell; /* Ведет себя как ячейка таблицы */
}

Великолепная сетка Grid

Используя CSS Grid, можно установить родителю роль контейнера грида, а потомку — заполнение доступного пространства.

.parent {
  display: grid; /* Путь к гибкой разметке */
  min-height: 100vh;
}

.child {
  align-self: stretch; /* Растягивание во всю доступную высоту */
}

Нюансы использования

Дочерние элементы не наследуют min-height прямо из-за ограничений CSS (ссылка на отчет об ошибке в WebKit). Рассмотренные способы являются эффективными обходными путями для решения данной ситуации.

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

Контейнер (📦): min-height установлен на 100%

Потомок (🌱): стремится расти вверх

    🌱
   /|\   <- Стремится вверх
  / | \
 /  |  \
📦  📦  📦  <- Но без явно заданной высоты это затруднительно

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

Особенности и исключения и их обработка

Вот как справиться с типичными особенностями и использовать практические знания в CSS:

Обеспечьте родителю явную высоту

Добавление height: 1px; к родительскому элементу позволяет его потомкам унаследовать или вычислить свои размеры.

Избегайте конфликта свойств

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

Проверка совместимости браузера

Не забудьте про проверку поддержки свойств CSS Grid и Flexbox на ресурсе caniuse.com.

Визуальная отладка

Используйте цвета фона или границы, чтобы проверять расположение и размеры элементов во время разработки.

Изучайте свойства display

Когда традиционные блочные модели не работают, могут пригодиться такие методы, как display: table и абсолютное позиционирование.

Flexbox и Grid — это современные решения, помогающие решить проблемы с наследованием высоты. Подробнее о них можно узнать в наших Полезных материалах.

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

1. Полное руководство по Flexbox | CSS-Tricks
2. CSS – вложенный элемент с min-height: 100% не наследует высоту – Stack Overflow
3. Измерения в CSS: высота, ширина и их ограничения – W3Schools
4. min-height – MDN Web Docs
5. Визуальная модель форматирования CSS – подробности – W3.org
6. Основы позиционирования в CSS – A List Apart
7. Свойство display – Codrops CSS Reference