如何从底部平滑扩展 div 到视口的 85%？答案

【问题标题】：How can I make a smooth expanding div from the bottom up to 85% of the viewport?如何从底部平滑扩展 div 到视口的 85%？
【发布时间】：2020-02-07 17:17:33
【问题描述】：

我这里有这段代码（请以展开模式打开）：

#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 地图中一样。所以就像从底部向上滑动 div 一样。标题在未展开但通知不展开时应该可见。当我单击标题时，我希望将元素平滑扩展至视口的85%，以便用户可以滚动浏览通知。当他再次单击标题时，它应该会回到初始状态。

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

【问题讨论】：

标签： javascript jquery html css

【解决方案1】：

要在展开和折叠两种状态之间切换，您需要某种 JavaScript。

就 CSS 而言，我建议使用#wrapper 而不是使用bottom: 0，使用top: calc(100% - 42px) 之类的东西（42px 应该是您希望可见的任何高度）用于折叠状态，并且然后top: 15% 为展开状态。

对于“流畅”的部分，你只需要添加一个过渡动画即可。

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

【讨论】：