使用引导程序的 100% 高度不起作用 [重复]

Question

我正在尝试在 bootstrap 中做 2 列，两者都是 100% 的高度。右边的列基本上是一个带有背景图像的 div，应该是全高的。我将 div 和容器设置为 100% 高度，但没有任何反应。如果我将文本放在 div 中，那么我会看到背景图像窥视。我究竟做错了什么？以下是部分代码：

<div class="container-responsive" id="content"><div class="row">
  <div class="col-lg-6 col-md-6 col-sm-6">

  </div>

  <div class="col-lg-6 col-md-6 col-sm-6">
    <div class="v-image-1" style="background-image: url('images/target.jpg');"></div>

  </div>  

</div>


html, body, #content {
  height:100%;
  overflow-x:hidden;
}

.v-image-1 {
  min-height:100%;
  background-size:cover;
}

非常感谢任何和所有帮助！

Answer 1

尝试为您的行以及 .col-lg-6 添加一个高度。列没有扩展，因为它们似乎受到没有高度的行的限制：

.row { height: 100%; }
.col-lg-6 { height: 100%; }

html, body, #content {
  height:100%;
  overflow-x:hidden;
}

.row {
  height: 100%;
}

.v-image-1 {
  min-height:100%;
  background-size:cover;
}

.col-lg-6 {
  border: solid 1px red;
  height: 100%;
}

<div class="container-responsive" id="content"><div class="row">
  <div class="col-lg-6 col-md-6 col-sm-6">

  </div>

  <div class="col-lg-6 col-md-6 col-sm-6">
    <div class="v-image-1" style="background-image: url('http://placekitten.com/200/300');"></div>
  </div>  

</div>