div填充所有剩余的空白区域（不是3列）

Question

我有3个div彼此叠放：

• div1 20px
• div2占用剩余的屏幕高度
• div3 20px

div2如何占用剩余的屏幕高度？

注意：我不想使用javascript。

Answer 1

<div id="top"></div>
<div id="middle"></div>
<div id="bottom"></div>

#top,#bottom {
    position:absolute;
    height:20px;
    left:0;
    right:0;
}
#top { top:0; }
#bottom { bottom:0; }
#middle {
    position:absolute;
    top:20px;
    bottom:20px;
    left:0;
    right:0;
}

它应该工作。

Answer 2

也许是这样的：

<div id="top">
    top div
</div>
<div id="middle">
    middle div
</div>
<div id="bottom">
    bottom div
</div>

#top {
    height: 20px;
}

#bottom {
    height: 20px;
    bottom: 0;
    position: absolute;
    width: 100%;
}

实际操作中请参见以下代码： http : //jsfiddle.net/PzA3W/