在没有javascript的情况下使div填充浏览器窗口的剩余高度

Question

首先，我想向您展示布局，所以我认为我会尝试实现这一目标：

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

Answer 1

您可以使用calc()功能执行此操作。

＆＃13;

＆＃13;

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

＆＃13;

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

＆＃13;

＆＃13;

＆＃13;

Answer 2

兼容所有浏览器

* {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
}
.head {
  height: 100px;
  top: 0;
  width: 100%;
  background: #00963F;
  position: absolute;
  border-width: 5px 5px 0 5px;
  border-style: solid;
  border-color: white;
  color: white;
  text-align: center;
}
.cont {
  position: absolute;
  top: 100px;
  width: 100%;
  bottom: 0px;
  background: #27338B;
  border-width: 5px;
  border-style: solid;
  border-color: white;
  color: white;
  text-align: center;
}

<div class="head">Fixed height</div>
<div class="cont">Rest of the browser height</div>

Answer 3

你可以这样做。

#div1 
{
    position:absolute;
    display: block;
    height: 200px;
    width: 100%;
    top: 0px;
    background-color: #900;
}

#div2
{
    position:absolute;
    display: block;
    height: 200px;
    width: 100%;
    top: 200px;
    background-color: #090;
}