Html 在不使用绝对定位的情况下设置层的高度

如何保持黄色层的100px高度，将其锁定在身体底部，并将所有可用空间提供给绿色层？所以，若窗口的高度为1000px，则第一个900px为绿色，最后一个100px为黄色。您是否可以在不使用绝对/相对定位的情况下帮助完成此操作

html, body {
    height: 100%;
}
.first {
    height: calc(100% - 100px);
    background-color: green;
}
.second {
    height: 100px;
    background-color: yellow;
}

小提琴：

---

浏览器支持：

我敢肯定，到目前为止，它已经有30页变得模糊不清了。只是这是一个有3个div的问题，以及他们如何合作的问题。事实上这是小提琴。解决方案是在中间部分添加一个“display:flex”。希望这会有所帮助。在这里，您可能唯一需要担心的是浏览器支持。有关calc的一些有用信息：

body {
    margin: 0;
    background: red;
}

.first {
    background: green;   
    width: 100%;
    height: 100px; 
 }

.second {
    background: yellow;
    width: 100%;
    height: 100px; 
}

html, body {
    height: 100%;
}
.first {
    height: calc(100% - 100px);
    background-color: green;
}
.second {
    height: 100px;
    background-color: yellow;
}