Question

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

我有两排。第一个占视口高度的60％，第二个占视口的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>

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

如何创建占据整个视口高度的两行

2 个答案: