0

在我网站的主页上，我使用滚动动画库在向下滚动时显示页面的不同部分。我希望父 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 ( .aboutand ) 上使用.work可以解决我的高度问题，但我需要所有隐藏的内容留在页面上以触发不同的方法和动画，所以我不能使用它。

我真的很喜欢一个响应速度更快的解决方案，它可以将父高度与第一个子 div 的高度相匹配。有没有办法只使用 CSS 来做到这一点？还是使用 Vue.js 或 Javascript？

4

0 回答 0