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/

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

2 个答案: