Css 可滚动div和固定底部div如何动态更改包装器中的高度？

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

这是一个例子

我几乎可以理解这一点，但是底部div与内容div中的最后一点信息重叠。是否有方法更改顶部div的高度，以便为底部div留出空间，无论其高度如何

HTML

---

您可以向包装器添加一个

填充底部：150px

（150px是底部div的高度）。喜欢这将为底部div提供足够的空间。

如果不在任何包含内容的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

---

希望这有帮助

我简化了一点，得到了我认为你想要的：

    <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>

---

查看JSFIDLE，它没有那么难。只需使用calc功能：

通过在变量中设置值，然后放弃

max height:inherit

规则，可以使包装保持动态

以下是相关的SCS

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

---

我想让底部的div换个尺寸。如果要添加填充，则必须使用jquery动态更改填充值。有没有更简单的方法来堆叠两个div？底部div的大小如何变化？每个页面上的内容不同，还是页面上的内容动态变化？无论哪种方式，您都可能需要用户端脚本。

    <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>

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

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