我确信这很简单但是......
我有以下内容:
HTML:
<div id='wrapper'>
<div id='panel1'></div>
<div id='panel2'></div>
<div id='panel3'>gest</div>
</div>
CSS:
#wrapper
{
position:absolute;
top:0px;
left:0px;
width:100%;
height:100%;
}
#panel1
{
position:relative;
top:0px;
left:0px;
float:left;
height:100%;
width:35px;
background-color:blue;
}
#panel2
{
position:relative;
top:0px;
left:0px;
float:left;
height:100%;
width:240px;
background-color:red;
}
#panel3
{
position:relative;
top:0px;
left:0px;
float:left;
height:100%;
background-color:green;
}
我想要的是让最后的绿色面板填满剩下的空间。我尝试了一些但不能做到的。我可以使用表来实现我想要的,这是我可能会做的,我只是想知道如何用css做到这一点?
我也尝试过使用列表元素,但最终遇到了同样的问题。
谢谢,
克里斯。
答案 0 :(得分:1)
我明白我明白了。你漂浮了另外两个面板,但是如果你不漂浮最后一个面板,它将填充其余的空间。通常它会漂浮在左侧两个容器的底部,但因为它们是100%高度,所以它不会。
因此,您应该使用此样式规则:
#panel3
{
height:100%;
background-color:green;
}
答案 1 :(得分:0)
删除浮动和位置,它将默认填充剩余的空间,因为所有元素的高度都是100%。