三列流體的寬度，可以使用或不使用側邊欄

Question

我有可以在特定頁面上打開和關閉的側邊欄，但我試圖設計一個CSS佈局來填充可用空間，而不管側邊欄是否啓用。我有這個至今：

CSS：

#container{ 
    width: 100%; 
} 
#sidebar-left, #sidebar-right, #content{ 
    height: 50px; 

} 
#sidebar-right{ 
    background: gray; 
    width: 50px; 
    float: right; 
} 

#sidebar-left{ 
    background: yellow; 
    width: 50px; 
    float: left; 
} 

#content{ 
    background: orange; 
} 

HTML：

<div id="container"> 
    <div id="content">content content content content content content content 
     <div id="sidebar-left">sidebar</div> 
     <div id="sidebar-right">sidebar</div> 
    </div> 
</div> 

的jsfiddle鏈接： LINK

的問題是右列重疊的主要內容列。但是，我仍然希望將中間欄保持爲100％，以便在其中一個側欄被禁用時填充所有空間。

Answer 1

添加一個包含主要內容的容器，並將overflow: hidden應用於該容器，以便爲其應用新的block formatting context。您需要稍微重新排列元素。請看下圖：

HTML

<div id="container"> 
    <div id="content"> 
     <div id="sidebar-left">sidebar</div> 
     <div id="sidebar-right">sidebar</div> 
     <div id="col-main">content content content content content content content contente conte tnoe o toa nao no ton oanota ona</div> 
    </div> 
</div> 

CSS

#container { 
    width: 100%; 
} 

#sidebar-left, #sidebar-right, #content { 
    height: 50px; 

} 
#sidebar-right { 
    background: gray; 
    width: 50px; 
    float: right; 
} 

#sidebar-left { 
    background: yellow; 
    width: 50px; 
    float: left; 
} 

#content { 
    background: orange; 
    height: auto; 
} 

#col-main { 
    overflow:hidden; 
} 

這裏有一個用的jsfiddle列展示它：http://jsfiddle.net/aBbtN/8/

，無：http://jsfiddle.net/aBbtN/10/