div filling up all remaining white space (not 3 columns)

I have 3 divs stacked on top of one another:

• div1 20px
• div2 take up remaining screen height
• div3 20px

How can I have div2 take up remaining screen height?

not开发者_StackOverflowe: i don't want to use javascript.

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

It should work.

Maybe something like this:

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

See this code in action: http://jsfiddle.net/PzA3W/