Расчет высоты родительского блока при позиционировании дочерних элементов

Question

Расчет высоты родительского блока при позиционировании дочерних элементов

Рейтинг: 0Ответов: 0Опубликовано: 30.05.2023

Есть секция с несколькими элементами, в которой 2 элемента имеют position:absolute. Как задать высоту секции, чтобы вместить и div и эти 2 дочерних элемента? Их высота будет меняться, т.к. делаю адаптив под разные экраны. Попытка прописать в .hero height:auto не помогла, уже сейчас .hero__img-ice-cream вылезает по высоте

.hero{
    position: relative;
    padding-top: 3.125rem;
    background-color: var(--background-color-teme-dark);
}
.hero__img-points{
    position: absolute;
    bottom: 0;
    left: 25%;
    z-index: 1;
}

.hero__img-ice-cream{
    position: absolute;
    bottom: 0;
    left: 55%;
    transform: translateX(-55%);
    z-index: 2;
}

        <section class="hero">
            <div class="container hero-container">
                <h1 id="hero">ice cream made with passion</h1>
            </div>
            <picture class="hero__img-points">
                <img src="./images/points-mobile-320.png" alt="points">
            </picture>
            <picture class="hero__img-ice-cream">
                <img src="./images/hero-mobile-320.png" alt="main ice-cream">
            </picture>
        </section>

css html

Источник: Stack Overflow на русском

Расчет высоты родительского блока при позиционировании дочерних элементов

Ответы