事业部宽度自动调整屏幕/父元素

Question

我相信这是简单的，但...

我有以下几点：

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

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

谢谢，

Chris。

Answer 1

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

因此，你应该使用这个样式规则：

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

http://jsfiddle.net/hGWyF/

Answer 2

卸下两个float和位置，那么默认情况下填补空间的休息，因为所有的元素具有的高度100％。