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

我脑子里有这个模板

---

我不知道怎样才能实现第二个“弹性div”。它必须用他的高度填满屏幕上所有剩余的空间（不能更大，因为我不想看到y形卷轴）。有可能吗？

使用javascript窗口对象的调整大小事件。监听此事件，然后我们必须手动更新视觉元素（div..等）。

您说您想要一个“有弹性”的第二个div，如我的示例所示

.firstDiv {
    height: 400px;
}

.secondDiv {
    height: 100%;
}

---

第二个div中必须有内容，否则将看不到，但是它的高度将取决于div内的内容，因此它将根据您的需要进行拉伸。

视口单位

和

计算

简化了此过程

*{
保证金：0；
填充：0；
}
.一{
高度：50px；/*演示高度*/
背景：红色；
}
.二{
高度：计算（100vh-50px）；
背景：蓝色；
}

看看这个。希望有帮助

HTML-

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

---

也许

100%

可能更好，只是为了提供更好的浏览器覆盖率。这就是答案。虽然100%的物体……不能是物体，因为物体可能超过视口高度。您对stretchy的解释不正确，但这并不能解决OPs问题。如果未在

.secondDiv

的父元素上设置高度，

.secondDiv

将作为常规DIV，而不应用任何类。如果在父元素

上设置了高度，则secondDiv

将无法正确拉伸以填充剩余空间。您能否分享一个示例/代码片段，说明如何执行此操作，而不仅仅是含糊不清地提及如何执行此操作。请用文字解释此操作的含义。

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

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;
}