css - ブラウザの幅の 100% に div スケールを作成する方法は?

Question

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

サイドバーは 100px の固定幅です。コンテンツの幅をブラウザの幅の 100% にするにはどうすればよいですか?

http://jsfiddle.net/chickendance/qQQTU/1/

Answer 1

シンプルな CSS でこれを行うことができます。

#sidebar {
    float: left;
    width: 100px;
}

#content {
    margin-left: 100px;
}

wrapperdivで更新:

HTML

<div id="wrapper">
    <p>wrapper</p>
    <div id="sidebar">sidebar</div>
    <div id="content">content</div>
    <p>wrapper</p>
</div>

CSS

* {
    /* reset */
    margin: 0;
    padding: 0;
}
html,
body {
    /* for demo purposes only */
    height: 100%;
}
#wrapper {
    /* for demo purposes only */
    background: rgba(200, 200, 200, 0.6);
    height: 100%;
}
#sidebar {
    float: left;
    width: 100px;

    /* for demo purposes only */
    background: rgba(200, 200, 200, 0.6);
    height: 50%;
}
#content {
    margin-left: 100px;

    /* for demo purposes only */
    background: rgba(200, 200, 200, 0.9);
    height: 50%;
}

作業例: http://jsfiddle.net/kboucher/FK2tL/

Answer 2

#content プロパティを次のように変更するだけです。

#content {
            background: green;
            float: left;
            width: 100%;
            margin-right: -200px;
        }

したがって、必要に応じて 100% の幅を設定していますが、他の 2 つの DIV の幅をオフセットしています。このトリックはCSS Zen Gardenから学びました。

Answer 3

私たちと同じように、幅 % をいじる必要があります:

 #content {
        background: green;
        float: left;
        width: 75%;
    }

また、ボックス モデルに従って width: 100% の親 div を追加することも検討します。