html - 带页眉和页脚的布局以及不重叠的内容

Question

我想为满足以下条件的网页创建布局:

1. 在浏览器顶部固定高度的标题 div。
2. 固定在浏览器底部定义高度的页脚 div。
3. 填充页眉和页脚之间所有空间的主 div。
4. 当浏览器的高度降低到小于页脚和页眉的高度以及主 div 的内容时，这三个部分不应重叠。
5. 如果浏览器的高度降低到小于该高度，则整个文档都应该出现滚动条，而不仅仅是主要内容。

换句话说和数值:

假设页眉和页脚各为 100 像素，当然可变的浏览器高度为 800 像素；我想要主 div，假设它的内容只需要 200 像素就可以占据剩余的全部 600 像素。

当浏览器缩小到小于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>

Answer 1

您应该能够通过组合 overflow 来实现这一目标对于父级并使用 calc() main 的高度。试试 snippet below并调整容器的高度。我建议也给 main 一个 min-height，这样它就不会完全折叠，但这取决于您的需要。

但总的来说，我认为 flex 是更简洁的解决方案，请参阅其他答案。

#container {
  overflow: auto; /* Show scrollbars if content larger than #container */
  height: 320px;
}

header {
  width: 100%;
  height: 100px; /* Absolute height */
  background-color: red;
}

main {
  width: 100%;
  height: calc(100% - 200px); /* Dynamically calculated height */
  overflow: hidden;
  background-color: blue;
}

footer {
  width: 100%;
  height: 100px; /* Absolute height */
  background-color: yellow
}

<div id="container">
  <header>I'm a header that gets overlapped by the footer when the browser height is reduced</header>
  <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</main>
  <footer>I'm a footer and I overlap all the other divs when the height of the browser is reduced</footer>
</div>

另请注意，HTML5 为您提供了实际元素 header , main和 footer ，因此您应该使用它们来支持 div。