html - 固定幅のサイドバーを含むレスポンシブ 2 カラム CSS レイアウト?

Question

これに対する解決策がどこにも見つかりません (かなり一般的な問題だと思います)。

サイドバーを使用してレスポンシブ デザインを作成しています。サイドバーの幅は 200px に固定する必要があり、高さは不明です。メインコンテンツエリアが残りの幅をすべて占めるようにするにはどうすればよいですか?

私が最も近いものは次のとおりですが、問題はサイドバーがフッターに重なる可能性があることです。誰かが私のコードの修正を提案したり、機能するコードを共有したりできますか?

            * {
            padding: 0;
            margin: 0;
            outline: 0;
            -moz-box-sizing: content-box;
            -webkit-box-sizing: content-box;
            box-sizing: content-box;
        }
        body {
            background: orange;
        }
        #container {
            max-width: 1000px;
            min-width: 768px;
            margin: 0 auto;
            background: yellow;
            position: relative;
            height: 100%;
        }
        #header {
            background: purple;
            color: white;
            text-align: center;
            padding: 10px;
        }
        #main {
            position: relative;
        }
        aside {
            background: blue;
            width: 200px;
            color: white;

            position: absolute;
            top: 0;

            /* change this to "right: 0;" if you want the aside on the right. Also, change the "margin-left" code, below. */
            left: 0;

            padding-top: 20px;
            padding-bottom: 20px;

            padding-left: 10px; /* If you change this value, remember to change the margin-left value of #primary */
            padding-right: 10px; /* ditto */
        }
        #primary {
            background: red;

            /* change this to margin-right if you want the aside on the right. Also change the "left" code, above. */
            margin-left: 220px; /* aside_width + aside_left_padding + aside_right_padding = 200px + 10px + 10px */
            padding: 1em; /* whatever */
        }
        #footer {
            background: green;
            color: white;
            padding: 10px;
            position: absolute;
            bottom: 0;
            left: 0;
            right: 0;
        }

        <div id="container">
        <div id="header">
            <h1>LAYOUT TEST #2</h1>
        </div>
        <div id="main">
            <div id="primary">
                <h2>THIS IS THE MAIN CONTENT ** THIS IS THE MAIN CONTENT ** THIS IS THE MAIN CONTENT</h2>
                <p>lorem ipsum</p>
                <p>lorem ipsum</p>
                <p>lorem ipsum</p>
                <p>lorem ipsum</p>
                <p>lorem ipsum</p>
                <h2>sub heading</h2>
                <p>lorem ipsum</p>
                <p>lorem ipsum</p>
                <p>lorem ipsum</p>
                <p>lorem ipsum</p>
                <h2>sub heading</h2>
                <p>lorem ipsum</p>
                <p>lorem ipsum</p>
                <p>lorem ipsum</p>
                <p>lorem ipsum</p>
            </div>
            <aside>
                <h3>navigation (left)</h3>
                <p>lorem ipsum</p>
                <p>lorem ipsum</p>
                <p>lorem ipsum</p>
                <p>lorem ipsum</p>
                <p>lorem ipsum</p>
                <p>lorem ipsum</p>
                <p>lorem ipsum</p>
                <p>lorem ipsum</p>
                <p>lorem ipsum</p>
                <p>lorem ipsum</p>
                <p>lorem ipsum</p>
                <p>lorem ipsum</p>
                <p>lorem ipsum</p>
                <p>lorem ipsum</p>
                <p>lorem ipsum</p>
                <p>lorem ipsum</p>
                <p>lorem ipsum</p>
                <p>lorem ipsum</p>
                <p>lorem ipsum</p>
                <p>lorem ipsum</p>
                <p>lorem ipsum</p>
            </aside>
        </div>
        <div id="footer">
            <h1>LAYOUT TEST #2</h1>
        </div>
    </div>

Answer 1

1 =フレックスボックスあり： http：//jsfiddle.net/rudiedirkx/CjWbv/2/

#main {
    display: flex;
}
#primary {
    background: #bbb;
    flex: 1;
}
aside {
    background: #ddd;
    flex: 0 0 200px;
}

2 =あり：http calc()：//jsfiddle.net/rudiedirkx/CjWbv/

#main:after { clearfix here }
#primary {
    float: left;
    background: #bbb;
    width: calc(100% - 200px);
}
aside {
    background: #ddd;
    float: right;
    width: 200px;
}

どちらも、古いブラウザ（およびベンダーのプレフィックス）のフォールバックが必要になります。他の答えから選んでください。

Answer 2

フレックスボックスを入手するまでは、探していることを行う最善の方法は、単純に css を使用することだと思いますdisplay: table;。display: table;コンテナを に設定し、次に各列を に設定する必要がありますdisplay: table-cell;。これにより、フロートやその他の JS マジックを使用する必要がなくなります。また、これは IE8 まで動作します。レイアウトに「テーブル」という単語を使用すると大雑把に感じると思いますが、試してみてください。

詳細については、このリンクを参照してください。

これがあなたのコードの更新版です。

編集: コード例

html:このマークアップを想定

<div id="main">
    <div id="sidebar"></div>
    <div id="content"></div>
</div>

CSS:

#main {
    display: table;
    width: 100%;
}
#sidebar {
    display: table-cell;
    width: 200px;
}
#content {
    display: table-cell;
    /* no need to specify width. 
     * width will auto fill remaining width of parent `table` #main.
     * so 100% - 200px */
}

Answer 3

position: absoluteこれらすべてのアプローチは最善の方法ではないと思います。

1. max-widthとを含むコンテナ要素が必要ですmargin: 0 auto。も必要な理由がわかりませんmin-width。もちろんできます。

2. width配置したブロック要素は、親要素のすべてを自動的に取得します。したがって、ヘッダーとフッターに問題はありません。適切な場所に配置するだけで、適切にレンダリングされます。

3. 正しく行ったように、メイン セクションにはコンテナ要素を使用します。aside要素は左から右にレンダリングされるため、 の前にを記述したい場合があります#primary。

4. 希望の固定幅で に適用float: leftします。aside

5. メイン コンテンツ#primary要素は残りのスペースを自動的に取得します (または単に適用しますwidth: auto。注:残りのスペースは親要素の残りのスペースであるため、親要素に を設定した場合、それよりも狭くなるとmin-widthは思わないでください!#primary

6. ここで問題が発生します。コンテナ要素#mainが適切な高さになりません。に問題があるためですfloat。親要素を強制的にフロートされた子の高さに合わせるには、 を使用しますoverflow: hidden。

あなたは行く準備ができているはずです。コードを少し変更したバージョンを次に示します。

Answer 4

#main { position: relative; overflow:hidden;}

これにより、サイドバーの誤動作が停止します。

Answer 5

に追加margin-bottom: FOOTER_HEIGHTするasideか、代わりに次の方法を使用して修正できます。

<div id="container">
    <div id="header">
        YOUR_HEADER
    </div>
    <div id="body>
        <div id="sidebar">
            YOUR_SIDE_BAR_CONTENT
        </div>
        <div id="main">
            YOUR_CONTENT
        </div>
        <br />
    </div>
    <div id="footer">
        YOUR_FOOTER
    </div>
</div>

そしてCSS：

#sidebar {
    width: ...;
    height: ...;
    float: right;
}
#main {
    margin-right: WIDTH_OF_SIDE_BAR;
}
#body > br {
    clear: both;
}