ブートストラップ4で完全な高さの列を達成する方法

Question

私はブートストラップ4ベータ版を使用して、画面のサイズに関係なく2列の高さにしようとしています。

以下のコードは素晴らしいですが、どちらのデバイスでもこの2つの列はすべて高さです。

の上のcontainerの中にブートストラップナビバーを追加すると、ページの余分な高さが表示されてしまい、スクロールバーが表示されてしまいます。

私が誤解していない場合、ブートストラップは計算にナビバーの高さを考慮していません。

これを修正する方法がわかりません。

DEMOhttps://jsfiddle.net/a2z4paes/1/

navブロックを削除してみて、あなたが列をなし、スクロールバーとの完全な高さになって表示されます。

これは私のHTML

<div class="container h-100"> 
    <div class="row justify-content-center h-100"> 
     <div class="col-md-8" style="background: lightgreen; height: 100%"> 
      <h1>test</h1> 
     </div> 

     <div class="col-md-4" style="background: lightblue;"> 
      <h1>test</h1> 
     </div> 
    </div> 
</div> 

Answer 1

フレキシボックスを使用すると、CALC（）関数でそれを修正することができますが、それはより多くのハックのようになるにもかかわらず、そのための最適なソリューションです。 はここで更新フィドル、私はH-100クラスを削除 https://jsfiddle.net/sandeepcnath/a2z4paes/4/

以下の通りですやった手順、

のdivに

container { 
height: 100%; 
display: flex; 
flex-direction: column; 
} 

その後コンテナにこのスタイルを追加しますましたは、兄弟です（クラスの行を持つdiv & justify-content-center）スタイルを追加します。 フレックス：1;

ナビゲーションを開いたり閉じたりしても、高さは100％で、スクロールバーは表示されません。