内容溢出时显示滚动条

Question

我正在尝试应用看起来像这样的动画：页面加载一秒钟后，页面底部会缓慢显示一个框，我通过添加一个名为的类height（您在下面的代码中看到）实现了这一点。问题是框会有一些内容将由用户输入，因此它的高度将增加以能够显示用户输入的所有内容，但这不是当内容超过提供的高度时发生的情况（来自height班级的高度）溢出的内容将被隐藏。我不希望出现滚动条的行为。这是一个可执行的 snipet：https ://codepen.io/Amoocris/pen/vPWOpXsetTimeout(  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。