0
基本的な3セクションレイアウトのWebページをレイアウトします。上に固定された静的なトップナビゲーションバーがあります。そのすぐ下には、ページの全幅と残りの高さを占める2つのセクションがあります。固定サイドバー（折りたたみ不可）があり、右側にコンテンツを表示するメインペイン（ダッシュボードを読む）があります。3セクションレイアウト
現在のところ、サイドバーとメインウィンドウの幅のパーセント値をハードコーディングしています。サイドバーに最小/最大幅を適用すると、レイアウトが分割されます。必要に応じて固定幅にすることができます。
サイドバーの最小/最大/固定幅を割り当てると、サイドバーで使用されない残りの幅をメインペインのセクションで取得するにはどうすればよいですか？
html {
height: 100%;
}
body {
padding: 0px;
height: 100%;
}
div {
text-align: center;
color: white;
}
.top-nav {
background-color: green;
height: 65px;
margin: 0px;
padding: 0px;
}
.content {
height: 100%;
width: 100%;
}
.side-bar {
background-color: blue;
width: 10%;
height: 100%;
float: left;
}
.main-pane {
background-color: red;
height: 100%;
width: 90%;
float: right;
}<div class="top-nav">
Fixed Top Navigation
</div>
<div class="content">
<div class="side-bar">
Fixed Side Bar
</div>
<div class="main-pane">
Main Pane
</div>
</div>Here is the above code in a pen.
編集：私はより好ましい解決策がある場合は、この問題を完全に異なる方法で取り組む他のソリューションに開いています例えばフレックスボックス
あなたは、彼らがメインのペインで、すなわち唯一のコンテンツがスクロール可能である、彼らはユーザーにスクロールする必要があり、ユーザにスクロールする必要があるか、単にモハメド・テッド@次元 –
に変更しない意味ですか。 –
この質問を確認してください：http://stackoverflow.com/questions/26001765/research-on-creating-grids-that-combine-percentage-and-static-e-g-pixel-value – luke