1

特定のページでオンとオフを切り替えることができるサイドバーがありますが、どのサイドバーが有効になっているかに関係なく、使用可能なスペースを埋める 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>

JSFミドルリンク: LINK

問題は、右側の列がメイン コンテンツの列と重なっていることです。ただし、サイドバーの 1 つが無効になっているときにすべてのスペースを埋めるように、中央の列を 100% に維持したいと考えています。

4

1 に答える 1

3

メイン コンテンツを保持するコンテナを追加し、それに適用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/

于 2012-10-08T14:24:06.167 に答える