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

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

Если вы хотите, чтобы дочерний div-блок занимал всю высоту родительского элемента, используйте Flexbox. Вам просто нужно присвоить родительскому элементу значение display: flex;, и дочерний блок автоматически будет растянут на всю доступную высоту. Установка высоты для родительского блока в этом случае не требуется:

.parent {
  display: flex;
}

.child {
  /* "Я – дочерний div, занимающий 100% высоты!" */
  flex: 1; 
}

Задав значение flex для дочернего элемента, мы решаем проблему float и даже если высота родительского элемента задана не будет, всё будет работать как нужно.

Взаимоотношения родительского и дочернего элемента в CSS: разбор работы Flexbox

При работе с Flexbox, .parent становится флекс-контейнером, а .child — его флекс-элементом. Добавив к нашему дочернему элементу flex: 1;, мы указываем ему занять всё доступное пространство в границах родительского блока.

Кроссбраузерный код: поддержка различных браузеров

Flexbox учитывается детали и особенности разных браузеров. Чтобы обеспечить одинаковое отображение во всех браузерах, важно принять во внимание кроссбраузерную совместимость:

.parent {
  display: -webkit-box;  /* Старые версии iOS и Safari */
  display: -moz-box;     /* Старые версии Firefox */
  display: -ms-flexbox;  /* IE 10 */
  display: -webkit-flex; /* Chrome */
  display: flex;         /* Новые версии Opera и Firefox */
}

.child {
  -webkit-box-flex: 1; /* Старые версии iOS и Safari */
  -moz-box-flex: 1;    /* Старые версии Firefox */
  -ms-flex: 1;         /* IE 10 */
  -webkit-flex: 1;     /* Chrome */
  flex: 1;             /* Новые версии Opera и Firefox */
}

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

О приемлемости старых версий браузеров IE9 и старше: поддержка Flexbox

Однако, следует учитывать, что Flexbox не поддерживается в IE9 и более старых версиях браузера. Вместо него, как альтернативу, можно применить свойства display: table; для родительского элемента и display: table-cell; для дочернего, что имитирует работу flex.

Другие способы реализации высоты родительского блока

Абсолютное позиционирование

Если Flexbox вам неподходит, можно воспользоваться абсолютным позиционированием:

.parent {
  position: relative;
}

.child {
  position: absolute;
  top: 0;
  bottom: 0;
  left: 0;
  right: 0;
}

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

Метод с использованием table-cell

Если вы не предпочитаете ни flexbox, ни абсолютное позиционирование, можно применить display: table; к родительскому элементу и display: table-cell; к дочернему:

.parent {
  display: table;
  width: 100%;
}

.child {
  display: table-cell;
}

Данный метод не требует флекса, позиционирования и работает исправно.

Важные моменты

Поддержка старых браузеров и работа Flex

Для поддержки старых браузеров, вроде IE9, можно использовать полифиллы или не усложнять верстку, упростив её под эти условия.

Высота по умолчанию

Запомните, что дочерние элементы в флекс-контейнере по умолчанию имеют align-self: auto, что означает наследование этого от свойства align-items родительского элемента. Обычно, оно устанавливается в значение stretch, что позволяет дочерним элементам занимать всю возможную высоту родительского блока.

Отступы

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

100% высота

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

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

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

До:       После:

   🔳         🔲
🔲🟫           🔲

Маленький квадрат (🟫) олицетворяет исходное состояние дочернего div-элемента, большой квадрат (🔳) – родительский элемент. После применения CSS дочерний элемент заполняет всю высоту родительского блока (🔲).

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

1. Полное руководство по Flexbox | CSS-Tricks — Детальная информация о работе со свойствами flexbox.
2. Основные концепции flexbox – CSS: Cascading Style Sheets | MDN — Изучите основы для эффективного старта.
3. CSS Flexbox (Flexible Box) – W3Schools — Обучение с использованием примеров для создания профессиональных макетов на основе flexbox.
4. Flexbox Froggy – Игра по изучению CSS flexbox — Игра, которая помогает упростить процесс обучения flexbox.
5. css – Что означает flex: 1? – Stack Overflow — Обсуждение на Stack Overflow, которое позволит вам углубиться в особенности свойств flex-grow, flex-shrink и flex-basis.
6. Flexbox – Учим веб-разработку | MDN — Познакомьтесь с примерами эффективного применения flexbox в своих проектах.