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