css - 在 div 内部拉伸(stretch) div 并填充空的 div 空间

Question

我想制作一个模态框，其中包含一个可滚动的元素列表。可滚动元素是#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;
}

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