css - 使 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 和 高度。 <强> DEMO 。 header 和 footer 必须具有已知的高度。 (px,em,vh,..)