内容溢出时显示滚动条

Question

我正在尝试应用看起来像这样的动画：

页面加载一秒钟后，页面底部会缓慢显示一个框，我通过添加一个名为的类height（您在下面的代码中看到）实现了这一点。

问题是框会有一些内容将由用户输入，因此它的高度将增加以能够显示用户输入的所有内容，但这不是当内容超过提供的高度时发生的情况（来自height班级的高度）溢出的内容将被隐藏。

我不希望出现滚动条的行为。

这是一个可执行的 snipet：https ://codepen.io/Amoocris/pen/vPWOpX

setTimeout(

  function() {

    document.querySelector(".plansBackground").classList.add("height");

  }, 1000

);

* {

  box-sizing: border-box;

  margin: 0;

  padding: 0;

  font-family: Roboto;

  font-weight: bold;

}

.backIMg {

  background-color: rgb(155, 230, 170);

  height: 100vh;

  width: 100vw;

}

.plansBackground {

  background-color: rgba(255, 255, 255, .5);

  width: 100vw;

  height: 0;

  position: fixed;

  bottom: 0;

  left: 0;

  transition: 1s;

  color: black;

}

.height {

  height: 25vw;

}

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>

<link href="https://fonts.googleapis.com/css?family=Roboto:400,700" rel="stylesheet">

<meta name="viewport" content="width=device-width, initial-scale=1.0">

<div class="backIMg">

  <div class="plansBackground">

    <div class="Plans-container" data-aos="fade-up">

      <div class="background-extand">

        <h1 class="day">

          Monday

        </h1>

      </div>

    </div>

  </div>

</div>

Answer 1

是的，overflow:visible就像overflow:hidden在视口/页面最底部的绝对定位元素上一样。简单的解决办法是给overflow-y:auto到.height。