小编Cho*_*ldo的帖子

我正在尝试在包装器div中堆叠2个div.我需要一个设置高度的div来保持在包装div 的底部,我需要顶部 div来滚动.我无法将它们分开,因为我希望包装器在顶部div中与内容一起增长,直到它对于屏幕来说太大而然后开始滚动而不隐藏底部div.

这是一个例子.

我几乎可以解决这个问题,但是底部 div与内容 div中的最后一点信息重叠.有没有办法改变顶部 div 的高度,以便它为底部 div 留出空间,无论它的高度？

HTML

<div class="wrapper">
  <div class="top">
    <div class="content">
      // Dynamically added information that
      // grows the height of div.content
    </div>
  </div>
  <div class="bottom">
    // Input box or static button panel
  </div>
</div>

SCSS

.wrapper {
  max-height: 100vh;
  position: relative;
  overflow: hidden;

  .top {
    max-height: inherit;
    overflow: hidden;

    .content {
      max-height: inherit;
      overflow-y: scroll;
    }
  }
  .bottom {
    position: absolute;
    bottom: 0; …