Как подстроить высоту родительского блока (div) под высоту дочернего

Многие начинающие разработчики сайтов сталкиваются проблемой, когда родительский блок (div) не подстраивается под высоту дочернего блока.

Например:

Нужно разместить блок (дочерний) размером 500px в родительский блок у которого не задана высота, но есть отступ (например, padding: 50px).

Если не задавать никаких сторонних стилей, то картина будет примерно следующая:

Подстроить родительский блок под высоту дочернего

Дочерний блок занимает свои 500 пикселей, но подвал сайта при этом на него налазит, а высота родителя становится не более 100 пикслей (так как было задано padding: 50px).

Для того, чтоб подстроить высоту родительского блока под размеры дочернего достаточно дописать всего одну строку кода (для блока родителя):

overflow: hidden;

Для наглядности покажу более подробную часть кода:

Для того, чтоб родительский div принял высоту дочернего нам нужно (пример)

Пример html

<div class="parent">
<div class="child">Содержание</div>
</div>
<footer>Содержание</footer>

Пример css

.parent
{
padding: 50px;
overflow: hidden;
}
.child
{
height:500px;
}

Всего одна строка overflow: hidden; позволит растянуть родительский div по высоте дочернего.

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

Автор статьи
Автор статьи: Роман Евтушенко
Разработчик
Пост опубликован: 30.11.2021
1 Звезда2 Звезды3 Звезды4 Звезды5 Звезд (3 оценок, среднее: 5,00 из 5)
Загрузка...

Оставьте комментарий

Ваш адрес email не будет опубликован. Обязательные поля помечены *