Question

https://jsfiddle.net/7ba7sczz/

<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高度的黄色层，将其锁定在身体的底部，并为绿色层提供所有可用空间？因此，如果窗口的高度为1000px，则首先900px为绿色，最后100px为黄色。你能不用绝对/相对定位来帮忙吗？

Answer 1

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

小提琴：https://jsfiddle.net/keysox/bktLuh2x/

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

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

1 个答案: