ラッパー内のコンテンツ全体の高さのサイドバー

Question

私はコンテンツのあるセクションにサイドバーを配置する必要があるが、.containerラッパーの幅を尊重する必要があるブートストラップ3を使用するプロジェクトがあります。サイドバーは、ページの高さ全体を満たし、スクロール可能でなければなりません。

このJSFiddle（まだ2つ以上のリンクを投稿できないためコメントにリンクしています）は、私が持っている構造とそのスタイルを示しています。 JSFiddleのHTMLフレームの高さで再生し、ページの高さより小さくすることで問題を確認できます。よりよい例示する

、これらの画像は、すべての場合において、全てのページの高さを充填、青でサイドバーを表示：

• Case 1：セクションでは、ビューポートよりも背が高いです。サイドバーには、本体の高さ
• Case 2を次の：セクションでは、すべてのページを満たしていないが、サイドバーが

注意を行います。それは、サイドバーが.containerの幅に従うことが重要です。以下のコンテンツは、全幅で部分的に表示されません。

ボーナス：ケース2では、セクションは同様に

私は私ができるより多くの詳細を与えることを試みたが、私は任意の追加情報を提供することができ、完全な高さでなければなりません。

私はそれがスクリプトによって可能だけど、私はそれが出て詳細を支援するためのハードのようなものだばかりCSS

Answer 1

を使用して好みます。しかし、私は先に行って、あなたのマークアップを使用して、背景色の100％の高さが、このバイオリンを作った：https://jsfiddle.net/stevenng/8xdfosf6/

.container { 
    width: 100%; 
} 
.sidebar { 
    background: #bada55; 
    float: left; 
    width: 25%; 
    height: 100%; 
    position: absolute; 
    top: 0; 
    bottom: 0; 
} 

.sections { 
    background-color: #b000b5; 
    width: 75%; 
    height: 100%; 
    position: absolute; 
    top: 0; 
    bottom: 0; 
    right: 0; 
} 

は、この情報がお役に立てば幸い！