CSS如何填充容器的高度？

Question

我有一个容器，里面有两个div：

容器的高度固定为500px。 我不知道头部的大小，但我想用身体填充所有的容器高度。 我试图将此高度值设置为body：

• 100％：不起作用，因为身体从其父（容器）获得500px的高度并且溢出。
• 自动：正文可能为空或仅包含一些短内容，在这种情况下，正文高度将低于可用容器空间。

如何用合身体填充容器？

这是示例的小提琴：

#body{ height 100%; }

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

Answer 1

这是flexbox的用途：

＆＃13;

＆＃13;

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

.header {
  background-color: lightblue;  
}

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

＆＃13;

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

＆＃13;

＆＃13;

＆＃13;

Answer 2

可以使用display: table/table-row：

html {
  box-sizing: border-box;
}
*, *:before, *:after {
  box-sizing: inherit;
}

body{
    margin: 0;
}

.container{
    display:table;
    width: 100%;
    height: 500px;
    background-color: red;
    padding: 0 10px;
}

.head, .body{
    display: table-row;
}

.head{
    background-color: blue;
}

.body{
    background-color: yellow;
    height: 100%;
}

<div class="container">
    <div class="head">some head</div>
    <div class="body">foobar</<div>
</div>

JSFiddle

另外，我使用box-sizing: border-box。