事業部寬度自動調整屏幕/父元素

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％。