html - 不用javascript使div填充浏览器窗口的剩余高度

Question

首先我想向您展示一下布局，这样我想您会清楚我要实现的目标:

第一个 div 位于页面顶部，具有静态高度。第二个 div 必须将剩余空间填充到底部。如果没有 javascript 或 jQuery，我如何实现这一目标？

Answer 1

您可以使用 calc()功能来做到这一点。

html, body {
  height: 100%;
  margin: 0;
}
#top {
  background: #00A743;
  height: 100px;
}
#bottom {
  background: #40008B;
  height: calc(100% - 100px);
}

<div id="top"></div>
<div id="bottom"></div>