要素を100vhの内側にフィットさせる方法

Question

ブートストラップに2つのサイドバイサイドペインを作成しようとしています。ページ全体の高さは100vhで、ページのスクロールバーはありません。

ただし、左側のコンテンツタブにはスクロールバーがあります。代わりに、私はh1要素の高さを考慮していないコードを持っているし、左のコンテンツとページ全体のスクロールバーがあります。どのようにして左のコンテンツのボックスに唯一のスクロールバーが表示されるようにすることができますか？私の悪い仕事を説明して申し訳ありませんが、もしあなたがフィドルを訪れれば、それは本当に明らかでしょう。

Jsfiddle：https://jsfiddle.net/7uauho0d/1/

HTML：

<div id="pg-container"> 


    <h1> 
    TITLE AT TOP 
    </h1> 

    <div class="col-xs-8" id="left"> 
    <h1>LEFT CONTENT</h1> 
    <h1>LEFT CONTENT</h1> 
    <h1>LEFT CONTENT</h1> 
    <h1>LEFT CONTENT</h1> 
    <h1>LEFT CONTENT</h1> 
    <h1>LEFT CONTENT</h1> 
    <h1>LEFT CONTENT</h1> 
    <h1>LEFT CONTENT</h1> 
     <h1>LEFT CONTENT</h1> 
    <h1>LEFT CONTENT</h1> 
    <h1>LEFT CONTENT</h1> 
    </div> 

    <div class="col-xs-4" id="right"> 

    <h1> 
RIGHT CONTENT 
RIGHT CONTENT 
    </h1> 
    </div> 
</div> 

はCSS：flexboxの利用とともに

#pg-container { 
    height: 100vh; 
} 

#left { 
    overflow-y: scroll; 
    background-color: lightgrey; 
    /* When I specify 100% here, I expect it to take into account the <h1> at the top 
    so that this element is the height of the viewport minus the height of the title at 
    the top. I expect only 1 scrollbar, the one inside left content, there should be no 
    scrollbar for the page*/ 

    height: 100%; 
} 

#right { 
    height: 100%; 
} 

Answer 1

、height: 100vhが動作するはず持つ親コンテナにoverflow: hiddenを設定します。

チェックこのフィドル：あなたにも水平方向のスクロールを無効にしたい場合は、あなただけの代わりにoverflow: hiddenを使用することができます

#pg-container { 
    height: 100vh; 
    overflow-y: hidden 
} 

：https://jsfiddle.net/7uauho0d/7/

Answer 2

外側のdivにoverflow-y: hiddenを追加します。

上部のタイトルバーは常に表示されている必要があります。あなたは常にposition: absoluteとtop: 0でそれを強制することができますが。