CSS如何填充容器的高度？

Question

我有一个容器和里面的两个div:

容器的高度固定为 500 像素。我不知道头部的大小，但我想用 body 填充所有容器高度。我试图将这个高度值设置为 body :

• 100%:不起作用，因为主体从其父级(容器)获得 500 像素的高度并溢出。
• auto:正文可能是空的或只有一些简短的内容，在这种情况下，正文高度将低于可用容器空间。

如何用合适的本体填充容器？

这是例子中的 fiddle :

#body{ height 100%; }

https://jsfiddle.net/s2ems5hm/1/

Answer 1

这就是flexbox专为:

.container {
  display: flex;
  flex-direction: column;
  height: 500px;
  padding: 10px;
  background-color: yellow;
}

.header {
  background-color: lightblue;  
}

.body {
  flex: 1;  
  background-color: tomato;
}

<div class="container">
  <div class="header">Header<br>unknown<br>height</div>
  <div class="body"></div>
</div>