DIV填满所有剩余的白色空间（未3列）

Question

我有3周的div堆叠在彼此的顶部：

• DIV1 20像素
• DIV2占用剩余的屏幕高度
• DIV3 20像素

如何让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/