如何在不知道高度的情况下让 div 取剩余高度？

Question

我在 .container 中有 2 个元素，即 .header 和 .overflowElem。

我想让 .overflowElem 取 .container 的剩余高度，它应该是 overflow-y: auto。

HTML

<div class="box">

  <div class="container">

    <div class="header">
      <h1>HEADER</h1>
    </div>

    <div class="overflowElem">
      <ul>
        <li><a href="#">ITEM 1</a></li>
        <li><a href="#">ITEM 2</a></li>
        <li><a href="#">ITEM 3</a></li>
      </ul>
    </div>

  </div>

</div>

所有这些 HTML 都是使用 jQuery 的 ajax 注入的，如下所示：

$.ajax({
    type: "GET",
    url: "include/get_list.php",
    data: params
}).done(function(data) {
    var container = $("<div></div>")
        .attr("class", "container")
        .html(data)
        .hide()
        .appendTo(box);

}).fail(function() {
    alert("Error.");

}).always(function(data) {

})

注意 var container 在初始化时是如何隐藏的

CSS：

div.box {
  width: 700px;
  border: 1px solid red;
  padding: 45px 20px 20px;
}

div.container {
  height: 500px;
  background-color: #bbb;
}

div.header {
  background-color: red;
  /* HEIGHT in pixels is UNKNOWN */
}

div.overflowElem {
  overflow-y: auto;
  /*
  CANNOT USE THIS BECAUSE i DON'T know the height of .header
  height: calc(100% - height of .header in pixels);*/
}

jsfiddle:

https://jsfiddle.net/n4z02gL2/1/

现在，我可以为 .header 添加一个高度，并使用 calc() 和 bingo 计算 .overflowElem 的高度！

但是，因为所有的 HTML 都是使用 jQuery 的 ajax 插入的，并且在初始化时它是隐藏的，所以我不知道高度，也无法使用 ajax 获取它，因为容器是隐藏的

那么，解决方案是什么？任何想法，提示，技巧，黑客...... 谢谢

Answer 1

使用 flexbox，您所要做的就是更新您的 div.container 规则（为简洁起见，不加前缀）。

div.container {
  height: 500px;
  background-color: #bbb;

  // add these properties here
  display: flex;
  flex-direction: column;
}

当然，这是假设您的浏览器支持允许您使用 flexbox。 CSS Tricks has a great write-up of flexbox here.