如何设置中间的div占据剩余的高度 最好是css控制

<div id="top" style="background-color: #ffffff;"> 此处高度随时增加，高度不定</div>
<div id="clear" style="background-color: #CCCCFF; ">？？？如何设置可以让 
    浏览器高度缩小到此div消失时，出现滚动条并且footer不盖住top</div>
<div id="footer" style="background-color: #339933">此处要放在浏览器最底部，高度固定</div>