垂直拉伸div [英] Vertically stretch div

问题描述

我有3个div元素


< div id =header> FIXED CONTENT< / div>

< div id =content> DYNAMIC CONTENT< / div>

< div id =footer> FIXED CONTENT< / div>


如何做到这一点，标题保持在顶部，页脚在底部&垂直伸展的内容div填充标题&页脚。
我希望问题清楚。

How can make it so, that the header stays at top, the footer at the bottom & the content div to stretch vertically & fill the gap between header & footer. I hope the question is clear.

推荐答案

使用纯CSS：

#header {
  height: 100px;
}

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

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

这篇关于垂直拉伸div的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！