html - 三列流体宽度，可使用或不使用侧边栏

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到它，以便对其应用新的块格式化上下文。您需要稍微重新排列元素。见下文：

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;
}

​</p>

这是一个 jsfiddle 用列演示它：http: //jsfiddle.net/aBbtN/8/

并且没有：http: //jsfiddle.net/aBbtN/10/