Синхронизация высоты блоков div в CSS без фиксированной высоты

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

Для того чтобы дочерний элемент занял всю высоту родительского блока, примените модель flexbox: задайте для родительского элемента свойство display: flex;, а для дочернего элемента – flex: 1;. В результате дочерний div заполнит всю доступную высоту блока-родителя.

.parent { display: flex; }
.child { flex: 1; }

Пример применения в реальной разработке:

<div class="parent">
  <div class="child">
    <!-- Здесь находится ваш контент -->
  </div>
</div>

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

Подробный анализ: Как заставить Child быть на 100% высоты Parent

Использование Flexbox для построения идеальной сетки

Если необходимо добиться точного выравнивания отдельных дочерних элементов, пригодятся свойства align-items или align-self, которые работают в контексте flexbox:

.parent {
  display: flex;
  align-items: stretch; /* дочерние элементы займут всю доступную высоту */
}
.child {
  align-self: auto; /* дочерний элемент имеет своё индивидуальное поведение */
}

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

Техника display: table-cell; из прошлого

До появления flexbox часто использовался приём с display: table-cell;:

.parent { display: table; }
.child {
  display: table-cell;
  height: 100%; /* теперь размеры ячейки становятся строго ограниченными */
}

Однако, стилизация может столкнуться с трудностями, особенно когда речь идет об отступах и промежутках между ячейками.

Абсолютное позиционирование: проверенный временем метод

Абсолютное позиционирование — это один из старинных способов:

.parent { position: relative; }
.child {
  position: absolute;
  top: 0;
  bottom: 0;
}

Чтобы учесть всю высоту окна браузера, обязательно установите высоту для HTML и BODY:

html, body { height: 100%; }

Обратите внимание, что абсолютное позиционирование может усложнить расположение элементов и контроль за их перекрытием.

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

Представим ситуацию:

Родительский элемент Div (🏢): Высота не определена, зависит от содержимого.
Дочерний элемент Div (🏗️): Подстраивается под переменную высоту 🏢.

🏢🏗️
[__] <-- Дочерний элемент Div растягивается и адаптируется к родительской высоте.
[__]     Этот процесс напоминает работу лифта: он движется вверх и вниз, в зависимости
[__]     от того, на каком этаже нужно остановиться. 
[__]     Родительский элемент Div, как бы говорит: "💨 Я расту!".

Такое динамическое изменение размеров можно реализовать, применив модель flexbox или grid:

.parent {
  display: flex;
  flex-direction: column;
}

.child {
  flex-grow: 1;
}

Стратегии применения для специфических сценариев макета

Префиксы вендоров: необходимость для обеспечения совместимости

Чтобы обеспечить совместимость со многими браузерами, помните о префиксах вендоров:

.parent {
  display: -webkit-flex; /* Safari будет благодарен */
  display: -ms-flexbox; /* Edge также не оставим в стороне */
  display: flex; /* И все остальные браузеры учтём тоже */
}

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

"Поддельные колонки": иллюзия равенства

Для создания визуально одинаково высоких колонок используется техника "поддельных колонок":

.parent {
  background-image: linear-gradient(to right, #f7f7f7 10em, white 10em);
}
.child {
  padding-left: 10em;
}

Благодаря этому приёму визуальное равенство колонок сохраняется даже при изменении их содержимого.

Динамический мир требует гибких решений

Старайтесь избегать использования фиксированной высоты при динамическом содержимом, например, когда контент формируется динамически, как в PHP, или при пользовательском вводе. Flexbox и Grid позволяют макету гибко адаптироваться под эти изменения:

.parent {
  display: flex;
  flex-wrap: wrap;
}
.child {
  flex: 1;
  min-width: 200px;
}

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

1. Полное руководство по Flexbox | CSS-Tricks
2. Разметка сетки CSS – CSS: Cascading Style Sheets | MDN
3. html – Как сделать высоту body равной 100% высоты браузера – Stack Overflow
4. CSS Макет – Свойство position
5. calc() – CSS: Cascading Style Sheets | MDN
6. display – CSS: Cascading Style Sheets | MDN
7. Шпаргалка по Flexbox – Открой для себя спасение при разработке