一个可滚动的div和一个固定底部的div如何在包装器内动态更改高度

Question

我正试图在包装器div内堆叠2个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>

scs

.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;
  }
}

Answer 1

您可以向包装器添加padding-bottom:150px（150px是底部div的高度）。就像这里。这将为底部分区提供足够的空间。

Answer 2

这并没有那么难。只需要使用计算功能：

Fiddle

您可以通过设置变量中的值来保持包装器的动态性，然后放弃max-height: inherit规则。

以下是相关的SCSS

$box_height: 100vh;
.wrapper {
    height: $box_height;
    max-height: $box_height;
    position: relative;
    overflow: hidden;
    
    .top {
        max-height: unquote("calc(" + $box_height + " - 150px)");
        overflow: hidden;
        
        .content {
            max-height: unquote("calc(" + $box_height + " - 150px)");
            overflow-y: scroll;
        }
    }
}

Answer 3

没有办法不给任何有内容的div添加填充或页边空白。这是代码：

.wrapper {
  max-height: 100vh;
  position: relative;
  overflow: auto;
  .top {
    padding-bottom:150px;
  }
  .bottom {
    position: fixed;
    bottom: 0;
    left:0;
    width:100%;
    height:150px;
    background-color:red;
  }
}

您实际上不需要额外的div".content"。div".top"的填充值等于底部固定div的高度。如果底部固定div是动态高度，您需要使用jQuery更改顶部div的填充值（没有其他选择）。但是对于内容动态的更改，您不需要添加任何jQuery。

希望这能有所帮助。

Answer 4

我稍微简化了一下，得到了我认为你想要的：

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

然后对于css：

    body{
        height: 100vh;
        margin: 0;
    }
    .wrapper {
        overflow: hidden;
        width: 100%;
    }
    .content {
        width: 100%;
        max-height: calc(100vh - 150px);
        overflow-y: scroll;
    }
    .bottom {
        height:150px;
        width:100%;
        background: #f00;
    }

在这里查看jsfiddle