不使用绝对定位设置图层高度

Question

<body>
    <div class="first">
    </div>

    <div class="second">
    </div>
</body>

css

body {
    margin: 0;
    background: red;
}

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

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

如何保持黄色层的 100px 高度，将其锁定在 body 底部并将所有可用 space 提供给绿色层？因此，如果 window 的高度为 1000px，则前 900px 为绿色，最后 100px 为黄色。不使用absolute/relative定位能不能帮忙做一下？

Answer 1

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

Fiddle: https://jsfiddle.net/keysox/bktLuh2x/

浏览器支持：http://caniuse.com/#feat=calc

不使用绝对定位设置图层高度

Setting height of layers without using absolute positioning

html

css

css-position