これはかなりの時間を要していると確信していますが、HTML/CSS - サイドバーの長さ100％縦のスクロールバーに関係なくページの高さ
開発中のアプリケーション用のHTMLヘルプファイルを作成しています。このファイルは2つのセクションに分割されています。 1つは、サイドバー（左に浮かぶ）と2つ、メインのコンテンツセクション（また左に浮動）です。
私が直面している問題は、メインのコンテンツがページの高さの100％を超えて拡大すると、サイドバーの背景が停止することです。
私はサイドバーの背景イメージを割り当てますが、私のデザインの整合性を維持するために、私はボディの別の背景イメージを設定する必要があります。 http://jsfiddle.net/5gpFx/
うまくいけば、あなたは私が十分にそれを伝えるために失敗した場合、問題が何であるかを見るのを助けることができます -
が、これは私が設定フィドルをJSチェックしてください！
乾杯！
コンテナに両方の列をラップして、その上に偽の列の背景を設定するだけで、どのようなイメージでもボディを設定できるようになります。私はここで簡単な例を作りました：http://jsfiddle.net/5gpFx/2/
私は同じ問題を抱えていましたが、私は上記のフレックスボックスで解決策を作ることができませんでした。だから私は自分自身のテンプレートを作成し、それが含まれています：
フレックスボックスを使用しましたが、プロパティだけを使用してより簡単な方法で表示しますフレックスとフレックス方向：行|：
私は角を使用しています。コンポーネントのサイズを親要素の100％にします。
重要なのは、サイズを制限するためにすべての親のサイズを（パーセントで）設定することです。次の例では、myappの高さはビューポートの100％です。
ヘッダーとフッターに5％があるため、メインコンポーネントのビューポートは90％です。 https://jsfiddle.net/abreneliere/mrjh6y2e/3
body{
margin: 0;
color: white;
height: 100%;
}
div#myapp
{
display: flex;
flex-direction: column;
background-color: red; /* <-- painful color for your eyes ! */
height: 100%; /* <-- if you remove this line, myapp has no limited height */
}
div#main /* parent div for sidebar and content */
{
display: flex;
width: 100%;
height: 90%;
}
div#header {
background-color: #333;
height: 5%;
}
div#footer {
background-color: #222;
height: 5%;
}
div#sidebar {
background-color: #666;
width: 20%;
overflow-y: auto;
}
div#content {
background-color: #888;
width: 80%;
overflow-y: auto;
}
div.fized_size_element {
background-color: #AAA;
display: block;
width: 100px;
height: 50px;
margin: 5px;
}
HTML：：
<body>
<div id="myapp">
<div id="header">
HEADER
<div class="fized_size_element"></div>
</div>
<div id="main">
<div id="sidebar">
SIDEBAR
<div class="fized_size_element"></div>
<div class="fized_size_element"></div>
<div class="fized_size_element"></div>
<div class="fized_size_element"></div>
<div class="fized_size_element"></div>
<div class="fized_size_element"></div>
<div class="fized_size_element"></div>
<div class="fized_size_element"></div>
</div>
<div id="content">
CONTENT
</div>
</div>
<div id="footer">
FOOTER
</div>
</div>
</body>