css - 如何创建占据整个视口(viewport)高度的两行

Question

我正在使用 Bootstrap 3 以及如何创建布局，使其在水平和垂直方向上占据整个视口(viewport)。

我有两行。第一个在视口(viewport)高度的 60% 处，第二个在视口(viewport)高度的 40% 处。所以基本上是一些 ASCII 艺术:

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

我查看了 Stack Overflow 上的各种帖子，但找不到能够以响应方式在所有设备上运行的解决方案。我更喜欢本地 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>