Имеется код:
<style>
    body {margin: 0}
    #top {width: 600 background-color: #666633; height: 100px}
    #middle {width: 600 background-color: #999966; height: 100%}
    #bottom {width: 600 background-color: #666633; height: 50px}
</style>
<center>
    <div id="top">&nbsp;</div>
    <div id="middle">&nbsp;</div>
    <div id="bottom">&nbsp;</div>
</center>


Требуется, чтоб блок "bottom" был привязан к нижнему краю браузера, блок "top" - к верхнему, а блок "middle" должен заполнить пространство между ними. причем два обязательных условия: 1) привязка не должна зависить от разрешения экрана пользователя; 2) привязка не должна зависить от браузера пользователя.

В приведенном коде в браузерах IE и Opera относительная высота ("100%") игнорируется, а в FF она присваивает значение полной высоты экрана браузера (т.е. происходит смещение за границы экрана ровно на высоту блоков "top" и "bottom").

Собственно, какие есть варианты решения?