固定高度div +拉伸高度div = 100％屏幕高度。可能吗？

Question

我脑子里有这个模板

我不知道如何实现第二个“弹性div”。它必须在屏幕上填充所有剩余空间的高度（不大，因为我不想看到y滚动）。有可能吗？

Answer 1

viewport units和calc使这更加简单。

* {
  margin: 0;
  padding: 0;
}
.one {
  height: 50px; /* demo height */
  background: red;
}
.two {
  height: calc(100vh - 50px);
  background: blue;
}

<div class="one"></div>
<div class="two"></div>

编辑：Flexbox版本

* {
  margin: 0;
  padding: 0;
}
body {
  height: 100vh;
  display: flex;
  flex-direction: column;
}
.one {
  height: 50px;
  background: red;
}
.two {
  background: blue;
  flex-grow: 1;
}

<div class="one"></div>
<div class="two"></div>

Answer 2

查看此fiddle。希望它有所帮助！

HTML -

<div id="wrapper">
    <div id="first"></div>
    <div id="second"></div>
</div>

CSS -

html, body {
    width:100%;
    height:100%;
    margin:0;
}
#wrapper {
    width:300px;
    height:100%;
    position:relative;
}
#first {
    width:300px;
    height:200px;
    background-color:#F5DEB3;
}
#second {
    position:absolute;
    top:200px;
    bottom:0;
    left:0;
    width:300px;
    background-color:#9ACD32;
}

Answer 3

使用javascript窗口对象的resize事件。听到这个事件然后我们必须手动更新我们的可视元素（div..etc）。

Answer 4

你说你想要一个“弹性”的第二个div，我的例子就是这个。

/conf/catalina.properties

第二个div必须包含内容或者不会被看到，但是它的高度将决定div内部的内容，因此它将根据需要拉伸。

Answer 5

.div1{
height:400px;
z-index:1;
}

.div2{
height:100%;
position:relative;
top:-400px;
z-index:-1;
}