css 填充div剩余高度,该怎么解决

css 填充div剩余高度
我的代码如下：
<div class="main">
        <div class="top">
        </div>
        <div class="bottom">
        </div>
</div>
main这个div我做成了可以随意缩放改变其大小，即他的height和width是随时改变的，top这个div的高度是固定的，我想让bottom这个div的高度随着main这个div的高度改变而改变，填充剩余的部分，即始终等于main.height-top.height，请问如何用CSS的方式解决？
------解决方案--------------------
範例：
http://jsbin.com/hesuxonozula/2/edit