如何在不知道高度的情況下使div占用剩余高度？

Question

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

我想.overflowElem采取.container的剩余高度，它應該是溢出-Y：汽車。

的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容器是如何隱藏的

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在這里有很多關於flexbox的文章。