100％divの高さを達成するためのより良い方法

Question

これらの塗りつぶしクラスをすべて追加しなくても、下の図のように100％の高さを自動スクロールで実現する良い方法はありますか？私はよりエレガントな方法が必要であるように感じる。 100vh：

http://plnkr.co/edit/dh63n6j9R6t9LiBKhHQA?p=preview

<section class="content fill"> 
    <div class="container-fluid fill"> 
     <div class="row fill"> 
      <div class="col-sm-12 fill"> 
       <div class="row fill"> 
        <div class="col-xs-8 fill"> 
         <div class="main-container-wrapper"> 
          <h1>Main</h1> 
          <div class="inner">Overflow</div> 
          <div class="inner">Overflow</div> 
          <div class="inner">Overflow</div> 
          <div class="inner">Overflow</div> 
         </div> 
        </div> 
        <div class="col-xs-4"> 
         <div class="right-container-wrapper"> 
          <h1>Right</h1> 
         </div> 
        </div> 
       </div> 
      </div> 
     </div> 
    </div> 
</section> 

と私のCSSは

/*スタイルは、あなたは、ビューポートの高さを使用することができ、ここで*/

body, html{ 
    min-height: 100%; 
    height: 100%; 
} 

.main-container-wrapper{ 
    background: red; 
    min-height: 100%; 
    height: 100%; 
    overflow-y: auto; 
} 

.right-container-wrapper{ 
    background: orange; 
    min-height: 100%; 
    height: 100%; 
} 


.fill{ 
    min-height: 100%; 
    height: 100%; 
} 

.inner{ 
    padding: 50px 0px; 
} 

Answer 1

行きます。

Answer 2

ビューポートの高さとその対応するビューポートの幅は、ブラウザのウィンドウに基づいてコンテナのサイズを変更します。

div { 
    height: 100vh; 
} 

100は、ウィンドウの高さ（または幅）の100％です。