css - 固定幅のサイドバーと全幅のコンテンツを作成する方法

Question

サイドバーとコンテンツを含むページを作成したい。サイドバーは修正されてwidth(200px)おり、コンテンツは

（body_width-サイドバーの幅）

。したがって、jQueryで作成され、完全に機能します。

編集

例

しかし、私は知りたいのですが、これはCSSのみで可能ですか？

Answer 1

display: table;これは、包含divを使用してdisplay: table-cell;から、内部divを使用して実行できます。次に、サイドバーに最小幅を適用すると、コンテンツがページの残りの部分を占めます。

デモはここにあります

の使用を先延ばしにしないでくださいdisplay: table。これは、表形式のマークアップを使用したり、HTMLのセマンティックを低下させたりするものではありません。これは、ブラウザにdivをテーブルセルと同じように処理させるだけです（これはまさに必要なものです）

HTML：

<div id="main_wrap">
    <div id="sidebar">1</div>
    <div id="content">2</div>
</div>​

CSS：

#main_wrap { 
    display: table;
}

#sidebar {
    background:red;
    min-width: 200px;
    display: table-cell;
}

#content {
    background:blue;
    display: table-cell;
    width: 100%;
}

Answer 2

ねえ、あなたはあなたに与えるために純粋なcssであなたの望みを得ることができmargin-left:200px;ます#content

CSS

#main_wrap {
border:3px solid green;
}

#sidebar{
        background:red;
        width: 200px;
        float:left;
    }

#content{
    background:blue;
    margin-left:200px;   
}

デモ

Answer 3

負のマージンを使用してみることができます。

完全な説明と例（デモ付き）： https ：//shellcreeper.com/response-fixed-width-sidebar-why-and-how/

HTML：

<div class="wrapper">

    <div class="content">
    </div><!-- .content -->

    <div class="sidebar">
    </div><!-- .sidebar -->

</div><!-- .wrapper -->

CSS：

.wrapper{
    margin-right: 200px;
}
.content{
    width: 100%;
    float: left;
}
.sidebar{
    float: right;
    width: 200px;
    margin-right: -200px;
}

Answer 4

これはcssで行うことができ、＃contentから幅とfloatを削除するだけです。

#content{
    background:blue;
}

jsFiddleファイルを確認してください