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/

三柱流体宽度，有或没有侧杆

1 个答案: