使用固定的页脚和标题响应浏览器制作2个div填充页面

Question

我有一个50px的固定页眉和页脚，我想要一个上部和下部div来填充页面的其余部分而不重叠。这是我的

section{
width:100%;
text-align: center;
}

section .lower, section .upper{
  width: 100%;
  height: 40%;
  position:absolute;
  padding: 5px 0;
  z-index: 901;
  text-align: center;
  display:block;
  clear: both;
}

section .upper{
  top: 50px;
  left: 0;
  background-color: white;
  opacity:.2;
}

section .lower{
  bottom: 50px;
  left: 0;

  background-color: #afa;
  opacity: 0.2;
}

Answer 1

有这两种可能性：

1. 使用display:flex; DEMO
2. 使用包含box-sizing:border-box，padding，absolute，relative和height的箱子模型。 DEMO 。 header和footer必须具有已知的height。 （PX，EM，VH，..）