Div宽度自动适合屏幕/父元素

时间:2011-11-11 15:19:12

标签: html css width

我确信这很简单但是......

我有以下内容:

http://jsfiddle.net/SUBH3/1/

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做到这一点?

我也尝试过使用列表元素,但最终遇到了同样的问题。

谢谢,

克里斯。

2 个答案:

答案 0 :(得分:1)

我明白我明白了。你漂浮了另外两个面板,但是如果你不漂浮最后一个面板,它将填充其余的空间。通常它会漂浮在左侧两个容器的底部,但因为它们是100%高度,所以它不会。

因此,您应该使用此样式规则:

#panel3
{
    height:100%;
    background-color:green;
}

http://jsfiddle.net/hGWyF/

答案 1 :(得分:0)

删除浮动和位置,它将默认填充剩余的空间,因为所有元素的高度都是100%。