Css 使用固定页脚和页眉，使2个div填充页面响应浏览器

我有一个固定的页眉和页脚的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;
}

---

有以下两种可能性：

使用

显示：flex

使用带有

框尺寸的框模型：边框框

，

填充

，

绝对

，

相对

和

高度

<代码>页眉和页脚必须具有已知的高度。（px，em，vh，…）

---

你有小提琴或密码笔给我们看整个画面吗？滚动怎么样？我使用的是一页插件，所以每个部分都是一整页。当我滚动时，它会将我带到下一页。是那种东西吗？没有你的代码……这正是我想要的，没有flex属性有什么方法可以做到吗？是的，如果页眉和页脚有已知的高度。