css - Bootstrap 整页列

Question

我想要有两列，每次整页大小时都填满给定内容。

问题是我的解决方案在我开始滚动页面之前一直有效。

示例

html,body {
  height: 100%;
  min-height: 100%;
}
.left-content {
  background: red;
}

.right-content {
  background: green;
}

.container-fluid {
  height: 100%;
}

.row {
  height: 100%;
}

[class^="col-"] {
  height: 100%;
}

<link href="https://netdna.bootstrapcdn.com/bootstrap/3.0.0/css/bootstrap.min.css" rel="stylesheet"/>
<div class="container-fluid">
  <div class="row">
    <div class="col-sm-6 left-content">
    LEFT COLUMN
    </div>
    <div class="col-sm-6 right-content">
    RIGHT COLUMN
    </div>
  </div>
</div>

有人有解决这个问题的方法吗？!

Answer 1

如何添加也适用于超小屏幕的 col-xs-6:

html,body {
  height: 100%;
  min-height: 100%;
}
.left-content {
  background: red;
}

.right-content {
  background: green;
}

.container-fluid {
  height: 100%;
}

.row {
  height: 100%;
}

[class^="col-"] {
  height: 100%;
}

<link href="https://netdna.bootstrapcdn.com/bootstrap/3.0.0/css/bootstrap.min.css" rel="stylesheet"/>
<div class="container-fluid">
  <div class="row">
    <div class="col-md-6 col-xs-6 left-content">
    LEFT COLUMN
    </div>
    <div class="col-md-6 col-xs-6 right-content">
    RIGHT COLUMN
    </div>
  </div>
</div>