页眉和页脚布局以及内容不重叠

Question

我想为具有以下条件的网页创建布局：

1. 一个标题div，它粘在已定义高度的浏览器顶部。
2. 一个页脚div，它粘在已定义高度的浏览器底部。
3. 填充页眉和页脚之间所有空格的主div。
4. 当浏览器的高度减小到小于页脚的高度和标题以及主div的内容时，3个部分不应重叠。
5. 如果浏览器的高度降低到小于此值，则应为整个文档显示滚动条，而不仅仅是主要内容。

换句话说和数值：

假设页眉和页脚各为100 px，浏览器高度当然可变为800 px;我想要一个主要的div，我猜想，它的内容只需要200px就能占用剩余的600px。

当浏览器缩小到小于100px（标题）+ 100px（页脚）+ 200px（主div的内容）= 400px的高度时;我不希望这三个部分重叠，并且我想要整个文档不仅仅是主要内容的魔杖滚动条。

只有HTML和CSS才能实现，而且不使用flexbox和javascript吗？

以下是示例代码（代码段）：

* {
  margin: 0;
  padding: 0;
}
body{
}
#container {
min-height:100vh;
position:relative;
}
#header {
background-color : red;
height : 100px;
width:100%;
}
#main {
background-color : blue;
width:100%;
}
#footer {
position:absolute;
bottom:0;
background-color : yellow;
height : 100px;
width:100%;
}

<div id="container">
<div id="header">I'm a header that gets overlapped by the footer when the browser height is reduced</div>
<div id="main">I'm a main who refuses to stretch and fill the remaining white space and which is overlapped by the footer when the browser height is reduced</div>
<div id="footer">I'm a footer and I overlap all the other divs when the height of the browser is reduced</div>
</div>