Частая причина — родитель «не видит» высоту потомков: например, потомки плавают (float) или позиционированы абсолютно (position: absolute), либо у родителя задана фиксированная высота. Решения зависят от причины. Кратко — что можно сделать:
1) Уберите фиксированную высоту
- Если у вас в CSS написано height: 200px; — просто удалите или замените на min-height, чтобы высота подстраивалась.
2) Если дети плавают (float)
- Контейнер «схлопывается». Простейшие способы:
- clearfix:
.list::after {
content: "";
display: table;
clear: both;
}
- или создать BFC: .list { overflow: auto; } (или overflow: hidden;)
- или современный способ: .list { display: flow-root; }
3) Если дети position: absolute
- Абсолютно позиционированные элементы не влияют на размер родителя. Решения:
- не использовать absolute (оставить статическое/relative позиционирование);
- если нужно абсолютное позиционирование внутри, вычислять высоту родителя через JS (например, element.style.height = element.scrollHeight + 'px';) или оборачивать абсолютный блок в нормальный поток.
4) Flexbox / Grid
- Контейнеры flex/grid обычно растут под содержимое, если им не задана фикс. высота. Если нужно, используйте display: flex / display: grid и не указывайте height.
5) Пример clearfix (рекомендуемый)
HTML:
<div class="list">
<div class="item" style="float:left">...</div>
<div class="item" style="float:left">...</div>
</div>
CSS:
.list::after {
content: "";
display: table; /* или block */
clear: both;
}
6) Быстрый CSS-хаки
.list { overflow: auto; } /* создаёт BFC и контейнер обернёт плавающие элементы */
или
.list { display: flow-root; } /* современный и чистый способ */
Если пришлёте фрагмент вашего HTML/CSS (или укажете, используются ли float/position:absolute/flex), покажу точное решение под ваш случай.