ПРИХОДИТЕ УЧИТЬСЯ НОВОЙ ПРОФЕССИИ ЛЕТОМ СО СКИДКОЙ ДО 70%Забронировать скидку

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

Пройдите тест, узнайте какой профессии подходите и получите бесплатную карьерную консультацию
В конце подарим скидку до 55% на обучение
Я предпочитаю
0%
Работать самостоятельно и не зависеть от других
Работать в команде и рассчитывать на помощь коллег
Организовывать и контролировать процесс работы

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

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

CSS
Скопировать код
.parent { display: flex; }
.child { flex: 1; }

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

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

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

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

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

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

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

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

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

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

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

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

CSS
Скопировать код
.parent { position: relative; }
.child {
  position: absolute;
  top: 0;
  bottom: 0;
}

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

CSS
Скопировать код
html, body { height: 100%; }

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

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

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

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

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

CSS
Скопировать код
.parent {
  display: flex;
  flex-direction: column;
}

.child {
  flex-grow: 1;
}

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

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

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

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

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

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

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

CSS
Скопировать код
.parent {
  background-image: linear-gradient(to right, #f7f7f7 10em, white 10em);
}
.child {
  padding-left: 10em;
}

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

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

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

CSS
Скопировать код
.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 – Открой для себя спасение при разработке