javascript - 如何制作一个从底部平滑扩展到视口(viewport) 85% 的 div？

Question

我这里有这段代码(请以展开模式打开):

#wrapper {
  position: fixed;
  background: gray;
  color: #fff;
  bottom: 0;
  left: 0;
  right: 0;
  border-radius: 12px 12px 0 0;
  width: 100%;
}

#title {
  text-align: center;
  padding: 15px;
  border-bottom: 1px solid white;
}

#notifications {
  display: flex;
  flex-direction: column;
      overflow: scroll;
    overflow-x: hidden;
}

.entry {
  padding: 15px;
}

<div id="wrapper">
  <div id="title">Notifications</div>
  <div id="notifications">
    <div class="entry">Test</div>
    <div class="entry">Test</div>
    <div class="entry">Test</div>
    <div class="entry">Test</div>
    <div class="entry">Test</div>
    <div class="entry">Test</div>
    <div class="entry">Test</div>
  </div>
</div>

当您探索附近时，它应该像在 Google map 中一样。就像从底部向上滑动 div 一样。当标题未展开时，标题应该可见，但通知不可见。当我单击标题时，我希望将元素平滑地扩展到视口(viewport)的 85%，以便用户可以滚动通知。当他再次单击标题时，它应该返回到初始状态。

这可能吗？如果是，怎么办？

Answer 1

要在展开和折叠两种状态之间进行更改，您需要某种 JavaScript。

就 CSS 而言，我建议使用 #wrapper 而不是使用 bottom: 0，而是使用 top: calc(100% - 42px)(42px 应该是您想要可见的高度)对于折叠状态，然后 top: 15% 对于展开状态。

对于它的“平滑”部分，您只需要添加一个过渡动画即可。

这是一个基本的代码笔，显示了我的意思:https://codepen.io/milesgrover/pen/gOpbrpd