ブートストラップ4でグリッドがページの残りの部分の高さを100％占めています

私は現在ブートストラップを学んでいて、まだかなり新しくなっています。私は、ブラウザのサイズが変更されても、ページのメイン見出し、グリッドの上の見出し、および3つの不等応答グリッドがページの残りの高さにまたがるページを作成しようとしています。私は高さや行と100％に各divを設定しようとしたが、私もこれを見てみましたが、私は多くの使用の何かを見つけられなかった、と私はこれを達成するだろうか分からない助けて。コードは次のとおりです。ブートストラップ4でグリッドがページの残りの部分の高さを100％占めています

EDIT：指定するには、

.div1 { 
 
    background-color:red; 
 
} 
 

 
.div2 { 
 
    background-color:gray; 
 
} 
 

 
.div3 { 
 
    background-color:blue; 
 
} 
 

 
.row { 
 
    height: 100%; 
 
} 
 

 
#main { 
 
    background-color: yellow; 
 
}

<!DOCTYPE html> 
 
    <html> 
 
     <html lang="en"> 
 
    <head> 
 
     <meta charset="utf-8"> 
 
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script> 
 
    <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-beta.2/css/bootstrap.min.css"> 
 
    <script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-beta.2/js/bootstrap.min.js"></script> 
 
    <script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.12.6/umd/popper.min.js"></script> 
 
    
 
    </head> 
 
    <body> 
 
     
 
    <link rel="stylesheet" href="test.css"> 
 
    <script src="test.js"></script> 
 
    <h1>Welcome</h1> 
 
    <div class="container-fluid" id="main"> 
 
     <h1>This is a heading</h1> 
 
     
 
     <div class="row"> 
 
     <div class="col-sm-3 div1">Left side</div> 
 
     <div class="col-sm-6 div2">Middle</div> 
 
     <div class="col-sm-3 div3">Right side</div> 
 
     </div> 
 
    </div> 
 
    
 
    </body> 
 
    </html>

私の問題は、スペースの100％を取るために、残りの領域を取得しているdivがページの100％を占めていない、ちょうど残りの部分

出典

2017-11-10 Joel Banks

ここでこの

.row { 
    height: 100vh; 
}

詳しい情報をお試しください： https://stackoverflow.com/a/16837667/7361767

出典

2017-11-10 18:16:55 Millicent

これは私の望むものに近いですが、divの1ページ分だけでなく、見出しにもページの下部までスペースを取る方法がありますか？ –

ブートストラップ4でグリッドがページの残りの部分の高さを100％占めています

答えて

関連する問題