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

Posted 2023-03-06

【中文标题】可滚动 div 和固定底部 div 如何在包装器内动态更改高度？

【英文标题】：How can a scrollable div and a fixed bottom div dynamically change height inside a wrapper?

【发布时间】：2014-12-31 01:11:25

【问题描述】：

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

这是example。

我几乎可以弄清楚这一点，但是 bottom div 与 content div 中的最后一点信息重叠。有没有办法改变 top div 的高度，以便为 bottom 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;
  

【参考方案1】：

您可以在包装器中添加padding-bottom:150px（150px 是底部 div 的高度）。喜欢here。这将为底部 div 提供足够的空间。

【讨论】：

我想让底部的 div 改变大小。如果我要添加填充，我将不得不使用 jquery 来动态更改填充值。有没有更简单的方法来堆叠两个 div？

底部 div 的大小如何变化？是根据内容在每个页面上有所不同，还是在页面上动态变化？无论哪种方式，您都可能需要用户端脚本。

【参考方案2】：

如果不向任何带有内容的 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。

希望这会有所帮助。

【参考方案3】：

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

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

【参考方案4】：

这并不难。只需要使用计算功能：

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;