固定高度标题和可变高度div中的可滚动div

Question

考虑这个演示布局：

<div style="height: 100%">
  <div style="height: 100px;">Header</div>
  <div style="overflow: scroll; height: auto;">
      ...content...
  </div>
</div>

（JSFiddle）

内部内容div应尽可能消耗高度（即100％ - 100px）并滚动其内容。这可能吗？

（浏览器兼容性不是问题。）

Answer 1

使用以下样式将文档的高度设置为100％：

html, body {
  height: 100%;
  margin: 0;
}

然后可以使用以下方法设置溢出div的高度：

height: calc(100% - 100px);

Fiddle 1

<小时/> 更现代的方法是将容器设为flexbox，并使用以下样式：

height: 100%;
display: flex;
flex-direction: column;

然后将这些样式用于标题：

height: 100px;
flex: none;

简单地overflow: scroll;表示可滚动内容。

Fiddle 2