如何让页面的下半部分占用剩余高度？

我已经搜索并尝试了一堆不同的东西。我有一个可变高度 tophalf，下半部分应填满剩余的空间。一个的jsfiddle：如何让页面的下半部分占用剩余高度？

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>

什么我现在看到的是绿色的页面占用整个窗口的高度，而不是剩余高度。我怎样才能使剩余的高度呢？

来源

2013-10-24 RobVious

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或conflicting absolute positions

来源

2013-10-24 21:50:47 Evgeny

感谢。如果下半部分的内容也是可变的高度呢？如何解释下半部分由于溢出而可能提供超过100％的空间的可能性？ – RobVious

将会有一个滚动条http://jsfiddle.net/ph35V/1/ – Evgeny