ブートストラップは画面全体にコンテンツを伸ばします

Question

私はレスポンシブデザインのためにブートストラップを使用しています。

画面のサイズに応じて内容を自動入力したい（どのブートストラップが組み込み可能か）。それが動作していないが、私は大きなモニター（22インチ）に接続してい

として、以下を参照してください：

（私のラップトップ上の）写真1。

私は期待して（ヘッダー6と、ブラウザウィンドウの端部との間に）ビッグモニター上の画面全体

写真2（下に空の領域に注目してください）をカバーヘッダコンテンツは画面全体をカバーするように大きく表示されます

0以下のように

HTML：

<div class="container-fluid"> 
<div class="row" > 
<table class="table"> 
<tr> 
<td><img alt="Bootstrap Image Preview" src="Images/Logo.png"></td> 
<td align="right"><img alt="Bootstrap Image Preview" src="Images/Header_RequestExpress.png"></td> 
</tr> 
</table> 

</div> 
<div class="row" style="border:1px solid; color:Red;"> 
    <div class="col-md-4" style="border:1px solid; color:green;"> 
     <h2>Categories</h2> 
     <!--Images Carousel Here--> 
    </div> 
    <div class="col-md-8"> 
     <div class="row" style="border:1px solid; color:blue;"> 
      <div class="col-md-12"> 
      <h2>Locations</h2> 
      <!--Images Carousel Here--> 
      </div> 
     </div> 
     <div class="row" style="border:1px solid; color:Maroon;"> 
      <div class="col-md-12"> 
      <h2>Location Current Requests</h2> 
      <h1>Header 1</h1> 
       <h2>Header 2</h2> 
        <h3>Header 3</h3> 
        <h4>Header 4</h4> 
        <h5>Header 5</h5> 
        <h6>Header 6</h6> 

      </div> 
     </div> 
    </div> 
</div> 

Answer 1

コンテナのdivにheight:100vh;を適用します。

Answer 2

あなたの例では、ラップトップではページがフルハイトになるようにルールを設定していないため、あなたが入力した内容でラッキーでした。

.tableと.rowのいずれかを縦に並べる必要があります。

例：

.table { 
    height: 30vh; 
} 

.row { 
    height: 70vw; 
} 

それともさんはtable高さが100pxですし、他の部分は、画面の残りのために満たされるようにしたい、あなたが適用できるとしましょう：

.table { 
    height: 200px; 
} 

.row { 
    height: calc(100vh - 200px); 
} 

NOTE私はあなたが別のクラスを追加することをお勧めしますdiv .rowそのクラスは、ブートストラップが提供するので、他の場所でも使用することができます。