在 div 内有 div stetch 并填充空的 div 空间答案

【问题标题】：have div stetch inside of div and fill up the empty div space在 div 内有 div stetch 并填充空的 div 空间
【发布时间】：2019-03-11 18:57:28
【问题描述】：

我想制作一个具有可滚动项目列表的模式。可滚动元素是#content div。在模式的底部，我想要页脚，它将从可滚动的 div 中选择项目。我一生无法弄清楚的是将可滚动的 div 和页脚保留在模态 div 内。

现在我在模态元素之外获得了页脚 div，但是如何让页脚位于模态元素内部。当您检查元素时，您会看到页脚位于模态框之外且位于模态框下方。我尝试过使用这么多 CSS 技巧，但都没有运气。

#background {
  position: fixed;
  width: 100%;
  height: 100%;
  background-color: black;
}

#modal {
  position: absolute;
  top: 25%;
  left: 25%;
  bottom: 25%;
  right: 25%;
  width: 50%;
  height: 50%;
}

#content {
  overflow-y: scroll;
  height: 100%;
  background-color: blue;
}

#footer {
  background-color: red;
}

<div id="background">
  <div id="modal">
    <div id="content">
      <div>Item</div>
      <div>Item</div>
      <div>Item</div>
      <div>Item</div>
      <div>Item</div>
      <div>Item</div>
      <div>Item</div>
      <div>Item</div>
      <div>Item</div>
      <div>Item</div>
      <div>Item</div>
      <div>Item</div>
      <div>Item</div>
      <div>Item</div>
      <div>Item</div>
      <div>Item</div>
      <div>Item</div>
      <div>Item</div>
      <div>Item</div>
      <div>Item</div>
      <div>Item</div>
      <div>Item</div>
      <div>Item</div>
      <div>Item</div>
      <div>Item</div>
      <div>Item</div>
      <div>Item</div>
      <div>Item</div>
      <div>Item</div>
      <div>Item</div>
      <div>Item</div>
      <div>Item</div>
      <div>Item</div>
      <div>Item</div>
      <div>Item</div>
      <div>Item</div>
      <div>Item</div>
      <div>Item</div>
      <div>Item</div>
      <div>Item</div>
    </div>

    <div id="footer">
      <div>Selected Item</div>
    </div>
  </div>
</div>

编辑：

旧版浏览器的最佳解决方案是将#content 中的高度替换为...

#content {
    height: calc(100% - 20px);
}

IE11 及更高版本的最佳解决方案是添加以下 CSS 并从 #content 中删除高度。感谢@Miro 提供这些解决方案。

#modal {
    display: flex;
    flex-direction: column;
}

#content {
    flex: 1;
}

【问题讨论】：

我不清楚你到底想做什么，你能清楚哪个元素应该是可滚动的吗？
#content 元素应该是可滚动的。
您希望页脚始终可见，或者当您滚动到底部时？
我希望页脚始终可见。
页脚已经在我这边一直可见

标签： css modal-dialog

【解决方案1】：

当我检查时，#footer 似乎不在我的模式之外。它正是根据 html 应该在的位置。如果您希望页脚也可滚动，则它需要位于#content 内。

编辑：要使其动态工作，您可以使用flex sticky footer。否则为其他解决方案查找“css only sticky footer”。

#background {
  position: fixed;
  width: 100%;
  height: 100%;
  background-color: grey;
}

#modal {
  position: absolute;
  top: 25%;
  left: 25%;
  bottom: 25%;
  right: 25%;
  width: 50%;
  height: 50%;
  display: flex;
  flex-direction: column;
}

#content {
  overflow-y: scroll;
  height: 100%;
  background-color: blue;
  position: relative;
  flex: 1;
}

#footer {
  background-color: red;
}

<div id="background">
  <div id="modal">
    <div id="content">
      <div class="item">Item</div>
      <div class="item">Item</div>
      <div class="item">Item</div>
      <div class="item">Item</div>
      <div class="item">Item</div>
      <div class="item">Item</div>
      <div class="item">Item</div>
      <div class="item">Item</div>
      <div class="item">Item</div>
      <div class="item">Item</div>
      <div class="item">Item</div>
      <div class="item">Item</div>
      <div class="item">Item</div>
      <div class="item">Item</div>
      <div class="item">Item</div>
      <div class="item">Item</div>
      <div class="item">Item</div>
      <div class="item">Item</div>
      <div class="item">Item</div>
    </div>
    
    <div id="footer">
        <div>Selected Item</div>
    </div>

  </div>
</div>

【讨论】：

您说得对，它是可见的，但是当您检查元素并将鼠标悬停在#modal div 元素上时，页脚不在元素内部，而是在外部和下方
我觉得这很奇怪，因为模态高度是 50%，但页脚现在超过 50%。
那是因为您将#content 的高度设置为100%，所以它会将页脚推出。您可以尝试在#content 上使用height: calc(100% - 20px);，其中20px 是页脚的高度。
这确实有效。有没有办法不必将高度设置为 20px 并让页脚的高度保持动态？
谢谢。这就是我所追求的。