ブートストラップフルページのdiv行80％と20％

Question

divst列80％と20％のフルページをブートストラップでどのように達成できますか？

---------- 
|  | 
|  | 
|  | 
|  | 
---------- 
|  | 
---------- 

はい、私はテーブルとそれを達成することができますが、私は知りたいと思うでしょう、それ、このような基本的なブートストラップ・レイアウトでのdiv行クラス

Answer 1

最新のブラウザの「vh」メジャーを使用して、ビューポートの高さの％でブロックサイズを設定し、Bootstraps-container-fluidを使用して2つの80/20divをラップする100％幅のコンテナを取得できます。

<div class="container-fluid"> 
    <div class="eighty"> 
    80% 
    </div> 
    <div class="twenty"> 
    20% 
    </div> 
</div> 

そして、彼らのスタイル：

.eighty { 
    height: 80vh; 
    border: 1px solid red; 
    display: block; 
} 

.twenty { 
    height: 20vh; 
    border: 1px solid blue; 
    display: block; 
} 

をここにplnkrです：https://plnkr.co/edit/VASmt6damfbQCk2zcAg0?p=preview

Answer 2

で

<div class="content"> 
    <div class="row eighty"> 
    <div class="col-xs-6"> 
     First column 
    </div> 
    <div class="col-xs-6"> 
     Second column 
    </div> 
    </div> 
    <div class="row twenty"> 
    <div class="col-xs-6"> 
     First column 
    </div> 
    <div class="col-xs-6"> 
     Second column 
    </div> 
    </div> 

することができますを行うことができます行の高さをウィンドウの高さのパーセンテージに拡張します。 HTML、本体と.content要素は、すべてのウィンドウの高さの100％に設定されている方法

html { 
    height:100%; 
} 

body { 
    height:100%; 
    margin:0; 
} 

.content { 
    height:100%; 
} 

.eighty { 
    height:80%; 
} 

.twenty { 
    height:20%; 
} 

注意。