Как создать две строки, которые занимают полную высоту видового экрана

Question

Я использую Bootstrap 3 и что создать макет, где он занимает полный видовой экран как по горизонтали, так и по вертикали.

У меня есть два ряда. Первый - на 60% высоты окна просмотра, а во втором - 40%. Таким образом, в основном с некоторыми ASCII искусства:

---------------------------- 
| 60% Of View Port Height | 
|       | 
---------------------------- 
| 40% Of View Port Height | 
---------------------------- 

Я посмотрел на различные посты на переполнение стека, но не может найти решение, которое будет работать на всех устройствах в реагирующей моды. Я предпочел бы родное решение Bootstrap 3, но другие решения также приветствуются.

Answer 1

Простой способ добавляет необходимую высоту строк

html, 
 
body { 
 
    height: 100%; 
 
} 
 

 
.viewport { 
 
    height: 100%; 
 
} 
 

 
.thick { 
 
    height: 60%; 
 
    color: white; 
 
    background-color: #800; 
 
} 
 

 
.thin { 
 
    height: 40%; 
 
    color: white; 
 
    background-color: #080; 
 
}

<div class="container viewport"> 
 
    <div class="row thick"> 
 
     <div class="col-xs-12">Hello</div> 
 
    </div> 
 
    <div class="row thin"> 
 
     <div class="col-xs-12">world</div> 
 
    </div> 
 
</div>

Answer 2

Один из способов, чтобы обернуть строки в 100/100 контейнере, и использовать table-row, чтобы получить нужную высоту ...

HTML

<div id="wrap"> 
    <div class="row sixty"> 
     <div class="col-md-12">60%</div> 
    </div> 
    <div class="row forty"> 
     <div class="col-md-12">40%</div> 
    </div> 
</div> 

CSS

html, 
body { 
    height: 100%; 
} 

#wrap { 
    height:100%; 
    display: table; 
    width:100%; 
    margin:0; 
} 

.row { 
    width:100%; 
    display: table-row; 
} 

.row > div { 
    width:100%; 
    display: table-cell; 
    border:1px solid #eee; 
} 

.row.forty, .forty>div { 
    height:40%; 
} 

.center-row.sixty, .sixty>div { 
    height:60%; 
} 

Bootply: http://bootply.com/98168