css - 如何使页面的下半部分占据剩余高度？

Question

我已经搜索并尝试了很多不同的东西。我有一个高度可变的上半部分，下半部分应该填满剩余的空间。一个JSfiddle：

http://jsfiddle.net/UCJmQ/

CSS：

.top {
    background-color: lightblue;
    height: 300px;
}
.bottom {
    background-color: green;
    min-height: 100px;
    overflow: hidden;
    height: 100%;
}

html, body {
    height: 100%;
}

HTML：

<div class="top"></div>
<div class="bottom">

</div>

我现在看到的是绿色页面占据了整个窗口的高度，而不是剩余的高度。我怎样才能让它取剩余的高度呢？

Answer 1

http://jsfiddle.net/ph35V/

<div class="wrapper">
    <div class="top">
        300px
    </div>
    <div class="bottom">
        Remaining height
    </div>
</div>

html, body {
    height: 100%;
    width: 100%;
    margin: 0;
}
.wrapper {
    display: table;
    height: 100%;
    width: 100%;
}
.top {
    display: table-row;
    background: lightblue;
    height: 300px;
}
.bottom {
    display: table-row;
    height: 100%;
    background: green;
}

也可以使用box-sizing:border-box或冲突的绝对位置

Answer 2

是否在 CSS 中指定了可变高度？

从小提琴我认为它是。如果是这种情况，请尝试设置为position: absolute并设置为上div 高度：left, bottom, right0top

演示