三列流体的宽度，可以使用或不使用侧边栏

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/