html - 仅在主Content-Div中激活滚动的主布局

我目前正在开发可重复使用的GUI布局。
所以我只想要一个基本的页眉，mainContainer和页脚。

我尝试了很多事情。
问题是我不知道如何正确定义高度。

html body{
	margin: 0;
	background-color: red;
	overflow: hidden;
	height: 100vh;
	width: 100vw;
}

.header{
	height: 64px;
	min-height: 64px;
	background-color: blue;
}

.mainContainer{
	background-color: gray;
	height: 100vh;
	width: 100vw;
	min-width: 800px;
	min-height: 600px;
	overflow: auto;
}

.footer{
	height: 20px;
	min-height: 20px;
	background-color: green;
}

<div class="header">

</div>
<div class="mainContainer">

</div>

<div class="footer">

</div>

标头应高64像素。页脚应为20px。
然后，mainContainer应该填充网站的其余部分。
但是，如果页面大小变得太小，则应该出现滚动条，但仅在mainContainer内部。

最佳答案

您可以使用flexbox以及通过height函数为.mainContainer指定calc，还可以指定overflow: auto以仅在该元素中滚动。
这是一个演示：

* {
  box-sizing: border-box;
  margin: 0;
  padding: 0;
}

.wrapper {
  display: flex;
  flex-flow: column nowrap; /** elements are stacked vertically without line breaks **/
  height: 100vh;
}

.header {
  min-height: 64px;
  height: 64px;
  max-height: 64px;
  background-color: red;
}

.footer {
  height: 20px;
  background-color: blue;
}

.mainContainer {
  min-height: calc(100% - (64px + 20px)); /** height = 100% of parent height which is 100vh minus (header height + footer height) **/
  overflow: auto; /** allow scrolling if needed **/
  background-color: green;
}

<div class="wrapper">
  <div class="header">HEADER</div>
  <div class="mainContainer">
    <p>Lorem ipsum dolor sit amet consectetur, adipisicing elit. Porro necessitatibus dolorum deleniti excepturi vel numquam reiciendis impedit. Natus neque reiciendis ea voluptatibus, vero explicabo odit harum perspiciatis fugiat rerum nemo!</p>
    <p>Lorem ipsum dolor sit amet consectetur, adipisicing elit. Porro necessitatibus dolorum deleniti excepturi vel numquam reiciendis impedit. Natus neque reiciendis ea voluptatibus, vero explicabo odit harum perspiciatis fugiat rerum nemo!</p>
    <p>Lorem ipsum dolor sit amet consectetur, adipisicing elit. Porro necessitatibus dolorum deleniti excepturi vel numquam reiciendis impedit. Natus neque reiciendis ea voluptatibus, vero explicabo odit harum perspiciatis fugiat rerum nemo!</p>
    <p>Lorem ipsum dolor sit amet consectetur, adipisicing elit. Porro necessitatibus dolorum deleniti excepturi vel numquam reiciendis impedit. Natus neque reiciendis ea voluptatibus, vero explicabo odit harum perspiciatis fugiat rerum nemo!</p>
    <p>Lorem ipsum dolor sit amet consectetur, adipisicing elit. Porro necessitatibus dolorum deleniti excepturi vel numquam reiciendis impedit. Natus neque reiciendis ea voluptatibus, vero explicabo odit harum perspiciatis fugiat rerum nemo!</p>
    <p>Lorem ipsum dolor sit amet consectetur, adipisicing elit. Porro necessitatibus dolorum deleniti excepturi vel numquam reiciendis impedit. Natus neque reiciendis ea voluptatibus, vero explicabo odit harum perspiciatis fugiat rerum nemo!</p>
    <p>Lorem ipsum dolor sit amet consectetur, adipisicing elit. Porro necessitatibus dolorum deleniti excepturi vel numquam reiciendis impedit. Natus neque reiciendis ea voluptatibus, vero explicabo odit harum perspiciatis fugiat rerum nemo!</p>
    <p>Lorem ipsum dolor sit amet consectetur, adipisicing elit. Porro necessitatibus dolorum deleniti excepturi vel numquam reiciendis impedit. Natus neque reiciendis ea voluptatibus, vero explicabo odit harum perspiciatis fugiat rerum nemo!</p>
    <p>Lorem ipsum dolor sit amet consectetur, adipisicing elit. Porro necessitatibus dolorum deleniti excepturi vel numquam reiciendis impedit. Natus neque reiciendis ea voluptatibus, vero explicabo odit harum perspiciatis fugiat rerum nemo!</p>
    <p>Lorem ipsum dolor sit amet consectetur, adipisicing elit. Porro necessitatibus dolorum deleniti excepturi vel numquam reiciendis impedit. Natus neque reiciendis ea voluptatibus, vero explicabo odit harum perspiciatis fugiat rerum nemo!</p>
    <p>Lorem ipsum dolor sit amet consectetur, adipisicing elit. Porro necessitatibus dolorum deleniti excepturi vel numquam reiciendis impedit. Natus neque reiciendis ea voluptatibus, vero explicabo odit harum perspiciatis fugiat rerum nemo!</p>
    <p>Lorem ipsum dolor sit amet consectetur, adipisicing elit. Porro necessitatibus dolorum deleniti excepturi vel numquam reiciendis impedit. Natus neque reiciendis ea voluptatibus, vero explicabo odit harum perspiciatis fugiat rerum nemo!</p>
    <p>Lorem ipsum dolor sit amet consectetur, adipisicing elit. Porro necessitatibus dolorum deleniti excepturi vel numquam reiciendis impedit. Natus neque reiciendis ea voluptatibus, vero explicabo odit harum perspiciatis fugiat rerum nemo!</p>
    <p>Lorem ipsum dolor sit amet consectetur, adipisicing elit. Porro necessitatibus dolorum deleniti excepturi vel numquam reiciendis impedit. Natus neque reiciendis ea voluptatibus, vero explicabo odit harum perspiciatis fugiat rerum nemo!</p>
    <p>Lorem ipsum dolor sit amet consectetur, adipisicing elit. Porro necessitatibus dolorum deleniti excepturi vel numquam reiciendis impedit. Natus neque reiciendis ea voluptatibus, vero explicabo odit harum perspiciatis fugiat rerum nemo!</p>
    <p>Lorem ipsum dolor sit amet consectetur, adipisicing elit. Porro necessitatibus dolorum deleniti excepturi vel numquam reiciendis impedit. Natus neque reiciendis ea voluptatibus, vero explicabo odit harum perspiciatis fugiat rerum nemo!</p>
    <p>Lorem ipsum dolor sit amet consectetur, adipisicing elit. Porro necessitatibus dolorum deleniti excepturi vel numquam reiciendis impedit. Natus neque reiciendis ea voluptatibus, vero explicabo odit harum perspiciatis fugiat rerum nemo!</p>
    <p>Lorem ipsum dolor sit amet consectetur, adipisicing elit. Porro necessitatibus dolorum deleniti excepturi vel numquam reiciendis impedit. Natus neque reiciendis ea voluptatibus, vero explicabo odit harum perspiciatis fugiat rerum nemo!</p>
    <p>Lorem ipsum dolor sit amet consectetur, adipisicing elit. Porro necessitatibus dolorum deleniti excepturi vel numquam reiciendis impedit. Natus neque reiciendis ea voluptatibus, vero explicabo odit harum perspiciatis fugiat rerum nemo!</p>
    <p>Lorem ipsum dolor sit amet consectetur, adipisicing elit. Porro necessitatibus dolorum deleniti excepturi vel numquam reiciendis impedit. Natus neque reiciendis ea voluptatibus, vero explicabo odit harum perspiciatis fugiat rerum nemo!</p>
    <p>Lorem ipsum dolor sit amet consectetur, adipisicing elit. Porro necessitatibus dolorum deleniti excepturi vel numquam reiciendis impedit. Natus neque reiciendis ea voluptatibus, vero explicabo odit harum perspiciatis fugiat rerum nemo!</p>
    <p>Lorem ipsum dolor sit amet consectetur, adipisicing elit. Porro necessitatibus dolorum deleniti excepturi vel numquam reiciendis impedit. Natus neque reiciendis ea voluptatibus, vero explicabo odit harum perspiciatis fugiat rerum nemo!</p>
    <p>Lorem ipsum dolor sit amet consectetur, adipisicing elit. Porro necessitatibus dolorum deleniti excepturi vel numquam reiciendis impedit. Natus neque reiciendis ea voluptatibus, vero explicabo odit harum perspiciatis fugiat rerum nemo!</p>
  </div>
  <div class="footer">FOOTER</div>
</div>