Как установить высоту родительского div на высоту только одного (из нескольких) дочерних элементов - PullRequest
Новая
       26

Как установить высоту родительского div на высоту только одного (из нескольких) дочерних элементов

0 голосов
/ 17 июня 2019

На домашней странице моего веб-сайта я использую библиотеку анимации при прокрутке, чтобы выявлять различные части страницы при прокрутке вниз.Я хочу, чтобы родительский div изначально имел высоту первого дочернего div (.intro).При прокрутке вниз высота поля увеличивается, чтобы соответствовать всей высоте содержимого.

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

<div class="home-box" :class="{ fullView: isScrolled}">
    <div class="intro">
        Only this content is displayed at first
    </div>
    <div class="about"
                data-aos="fade-up" 
                data-aos-anchor-placement="top-center"
                data-aos-once="true">
        Then this gets revealed
    </div>
    <div class="work"
                data-aos="flip-up">
        Finally this div is revealed
    </div>
</div>

.home-box {
    width: 60%;
    margin: 3rem auto;
    height: 30rem;
}

.fullView {
    height: 100%;
}

Я пытался установить начальную высоту в различных процентах (все от 1 до 99%), но это ничего не делает.Использование height: 70vh - самое близкое решение, которое я получил, но это по-прежнему вызывает проблемы на экранах других размеров.

Использование display: none на других дочерних элементах div (.about и .work) приведет кисправьте проблему с высотой, но мне нужно, чтобы весь скрытый контент оставался на странице для запуска различных методов и анимаций, поэтому я не могу использовать это.

Мне бы очень понравилось более отзывчивое решение, которое могло бы соответствовать родительскому.высота до высоты первого дочернего элемента.Есть ли способ сделать это, используя только CSS?Или иначе с Vue.js или Javascript?

...