html - 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;
}

它应该可以工作。