垂直拉伸div

我有 3 个 div 元素

< div id="header">FIXED CONTENT< /div >
< div id="content">DYNAMIC CONTENT< /div >
< div id="footer">FIXED CONTENT< /div >

如何才能做到页眉位于顶部、页脚位于底部以及内容 div 垂直拉伸并填充页眉和页脚之间的间隙。 我希望问题很清楚。

使用纯CSS：

#header {
  height: 100px;
}

#content {
  height: 100%;
  margin: 100px 0;
}

#footer {
  position: absolute;
  bottom: 0;
  height: 100px;
}