具有绝对位置的div中的页眉、内容和页脚

Question

我有一个具有绝对位置的div元素。位置值很重要，不能更改。如何在div中设置页眉、内容和页脚？

页眉和页脚的高度是固定的，内容应该占用剩下的所有空间。同样重要的是，页眉始终在顶部，页脚在底部。

父元素也应该是可调整大小的，并使用south resizable句柄，内容应该根据父元素的高度改变其高度。

.content {
    height: ?; /* What should this be?? */
}

情况示例:http://jsfidle.net/7gpzf/26/

Answer 1

一种方法是使中间内容位置绝对，并将页眉和页脚移动到中间内容位置。然后用填充物来抵消头部和脚部的空间。

HTML

null

.wrap {
  width: 100px;
  border: 1px solid black;
  position: absolute;
}

.header {
  position: absolute;
  height: auto;
  width: 100%;
  top: 0;
  border: 1px solid green;
}

.footer {
  position: absolute;
  width: 100%;
  height: auto;
  border: 1px solid green;
  bottom: 0;
}

.content {
  height: 100%;
  /* What should this be?? */
  border: 1px solid green;
  position: relative;
  top: 0;
  padding: 20px 0;
  /* padding height of header/footer */
  box-sizing: border-box;
}

html lang-html prettyprint-override"><div class="wrap" id="wrap">
  <div class="content">
    <div class="header">header</div>
    text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text
    text text text text
    <div class="footer">footer</div>
  </div>
</div>