ブートストラップ、ウィンドウの高さと一致する行高さ

Question

私はこの非常に単純なコードを持っている：この写真を与える

 
    <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css"> 
 
    
 
    
 
    <div class="container-fluid"> 
 
    <div class="row" style="background-color: grey;"> 
 
     <br> 
 
    </div> 
 
    <div class="row" style="background-color: yellow;"> 
 
     <br> 
 
    </div> 
 
    <div class="row" style="background-color: green;"> 
 
     <br> 
 
    </div>  
 
    </div> 
 

：

あなたはどのように埋めるかをウィンドウの残りの部分（赤い四角）に黄色の色（2番目の行）を置き、ページの最後に最後の行を押しますか？

はありがとう

Answer 1

あなたはフレキシボックスを使用することができます...

https://www.codeply.com/go/eXvFDheMxT

.d-flex { 
    display: flex; 
    flex-direction: column; 
    height: 100vh; 
} 

.flex-grow { 
    flex-grow:1; 
} 

そして、今後のブートストラップ4に、追加のCSSは必要ありません。

https://www.codeply.com/go/sNvNLAiCki

Answer 2

フッターを使用して、100％にコンテナの最小の高さを設定してみてください？

例CSS

min-height: 100% !important; 
height: 100% !important; 
margin: 0 auto -33px; 

Answer 3

.container-fluid { 
 
    display: flex; 
 
    flex-direction: column; 
 
    height: 100vh; 
 
} 
 

 
.class1 { 
 
    flex-grow:1; 
 
    background-color: yellow; 
 
}

<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css"> 
 
    <div class="container-fluid"> 
 
<div class="row" style="background-color: grey;"> 
 
    <br> 
 
</div> 
 
<div class="row class1"> 
 
    <br> 
 
</div> 
 
<div class="row" style="background-color: green;"> 
 
    <br> 
 
</div>  
 
</div>