html - div布局调整大小查询

Question

这是一个非常基本的问题，但我已经将一个看起来不错的网站放在一起，直到我向它添加另一个部分，但现在布局无法正常工作。原理和我刚才插入的代码是一样的。所以我的页眉、navbar 和页脚有一个固定的高度，内容填充剩余的空间，但如果内容超过浏览器的高度，而不是将页脚向下推，它只是重叠.这样做的正确方法是什么？我使用相对定位而不是绝对定位，这在内容小于浏览器高度之前是可以的，因此页脚移动到页面的一半。

提前致谢。

body {
  margin: 0;
  padding:  0;
}
#header {
  position: absolute;
  width:100%;
  height:40px;
  background:red;
}
#nav {
  position: absolute;
  top:40px;
  width:100%;
  height:25px;
  background:blue;
}
#content {
  position: absolute;
  top:65px;
  bottom:40px;
  width:100%;
  height:100%;
  background:yellow;
}
#footer {
  position: absolute;
  bottom:0;
  width:100%;
  height:40px;
  background:green;
}

<div id="header"></div>
<div id="nav"></div>
<div id="content">
text here.....<br>
text here.....<br>
text here.....<br>
text here.....<br>
text here.....<br>
text here.....<br>
text here.....<br>
text here.....<br>
text here.....<br>
text here.....<br>
text here.....<br>
text here.....<br>
text here.....<br>
text here.....<br>
text here.....<br>
text here.....<br>
text here.....<br>
text here.....<br>
</div>
<div id="footer"></div>

Answer 1

在#content 上使用min-height，例如:

#content {
  min-height: calc(100vh - 105px); /* Total window height minus the #nav, #header & #footer height */
}

看看下面的工作片段:

body {
  margin: 0;
  padding:  0;
}
#header {
  width:100%;
  height:40px;
  background:red;
}
#nav {
  top:40px;
  width:100%;
  height:25px;
  background:blue;
}
#content {
  top:65px;
  bottom:40px;
  width:100%;
  height:100%;
  background:yellow;
  min-height: calc(100vh - 105px);
}
#footer {
  width:100%;
  height:40px;
  background:green;
}

<div id="header"></div>
<div id="nav"></div>
<div id="content">
text here.....<br>
text here.....<br>
text here.....<br>
text here.....<br>
text here.....<br>
text here.....<br>
text here.....<br>
text here.....<br>
text here.....<br>
text here.....<br>
text here.....<br>
text here.....<br>
text here.....<br>
text here.....<br>
text here.....<br>
text here.....<br>
text here.....<br>
text here.....<br>
</div>
<div id="footer"></div>

希望这对您有所帮助!