Question

我正在尝试在bootstrap中做两列，两者都是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>

100％高度使用bootstrap无法正常工作

1 个答案: