responsive-design - レスポンシブ Web デザインで固定幅と % 幅を混在させる方法は?

Question

サイドバーとコンテンツの 2 つの列で構成される単純な Web ページがあります。両方の列が動的である場合は問題ありませんが、サイドバーの幅は固定する必要があり、コンテンツの幅はブラウザーの幅に応じて動的にする必要があります。

列の幅を計算する方法がわかりません。

ありがとう。

Answer 1

次のようなものを探していると思います。

http://jsfiddle.net/ekVJe/

私が行ったことは、サイドバーを左にフロートさせ、コンテンツにサイドバーの幅に相当する左余白を与えることです:

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

#content {
    margin-left: 200px;
}

Answer 2

あなたはこれを行うことができます：

フィドル

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

#content {
    overflow: auto; 
 /* trigger a block formatting context (this fills remaining horizontal width) */
}