Question

我一直在努力想出这个设计问题的解决方案，这似乎很简单，但这让我很困惑。

我的内容已固定在屏幕底部 - 其中一些内容始终存在，有些内容会不时隐藏。

关键是我希望上面的内容下降。我用javascript取得了一些成功，但并不完美。到目前为止我最接近的是使用max-height。

小提琴是我正在尝试使用max-height实现的工作表示。但是，最大高度并不理想，因为大部分内容都是动态的。

我想提出一个更好的解决方案，不使用max-height进行硬编码。

#fixed-footer {
  position:fixed;
  left:0;
  bottom:0;
  width:100%;
}

#fixed-footer-floating {
  padding:0 16px;
  margin-bottom:16px;
  box-sizing:border-box;
}

.fab-button {
  background-color:lime;
  display:inline-block;
  height:40px;
  width:40px;
  border-radius:50%;
}

#fixed-footer-auto {
  background-color:red;
  color:white;
  text-align:center;
  transform: translateY(0);
  transition: max-height 0.2s ease-out;
  max-height: 76px;
  
}

.some-content {
  padding:14px 16px;
  box-sizing:border-box;
}

#fixed-footer:hover #fixed-footer-auto {
  transform: translateY(100%);
  transition: transform 0.2s ease-in, max-height 0.4s 0.2s ease-out;
  max-height: 0;
}

<div id="fixed-footer">
<div id="fixed-footer-floating">
  <a class="fab-button"></a> This content always floats above the red box!
</div>
<div id="fixed-footer-auto">
    <div class="some-content">This area is responsive so may expand or contract vertically depending on the screen size and page state. It's content can be made to made disappear completely on certain events.</div>
</div>
</div>

将鼠标悬停在底部红色区域上以使内容消失。这通常会使用javascript触发。

将内容向下移出屏幕并填充空间

0 个答案: