サイトコンテンツの拡大と縮小

Question

サイドバーの幅は一定ですが、ブラウザの幅に応じて「サイトコンテンツ」領域が拡大または縮小する単純なフルスクリーンサイトを作成しようとしています。

http://i.stack.imgur.com/AKBme.png

http://i.imgur.com/ct3RN.png

ブラウザを展開するとサイドバーがまだその元の幅が、「サイトのコンテンツを維持している。ここで

は私がやろうとしています何を可視化する二つの絵があります"スペースを埋めるためにほぼ倍増しています。私が展開するサイトのコンテンツを取得することができた唯一の方法はまた、サイドバーには、例えば拡大させることです

：

<style> 
#sidebar{ 
width:20%; 
float:right; 
} 
#sitecontent{ 
width:80%; 
float:left; 
} 
</style> 

任意のアイデア？

Answer 1

<style> 
#sidebar{ 
    width: 256px; /* Use a fixed width for your sidebar. */ 
    float: right; 
} 
#sitecontent{ 
    display: block; 
    float: left; 
} 
</style> 

Answer 2

これは、反応性の高いウェブサイトを構築するたびに、私が基礎として使用する素晴らしいチュートリアルです。

乾杯を（これは、モバイルデバイスへのすべての方法を展開するだけでなく、契約するサイトを構築するカバー）。

Answer 3

これを試してみてください：

#sidebar { 
    float: left; width: 200px; /* or whatever */ 
} 
#sitecontent { 
    width: 100%; 
    box-sizing: border-box; // also -webkit-box-sizing, -moz-box-sizing, maybe -o-box-sizing 
    padding-left: 200px; /* same as sidebar */ 
} 

を「ボーダー・ボックス」のボックスがIEで動作しませんどの—サイジング使用することにより以下の8 —あなたが100％にコンテンツボックスの幅を設定することができますには、詰め物（および/または境界線）を含むが含まれています。