Question

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

我有以下内容：

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

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

谢谢，

克里斯。

Answer 1

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

因此，您应该使用此样式规则：

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

http://jsfiddle.net/hGWyF/

Answer 2

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

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

2 个答案: