响应式 div 和高度 % 不起作用

Question

当我尝试使带有 img 背景的 div 响应时遇到了一个小问题。

1. div 无法获取图片大小：540px-290px
2. 当我调整浏览器大小时，2 个 div 不会一起调整大小。

在每个 div 中我都有一个背景图片，我希望 div 具有响应性 但是两个 2 div 都没有得到全尺寸，我使用 % 来响应。 如果我使用像素将不会做出响应。

这是一个图像应该如何成为我的 div。 http://imgur.com/V9OROUD

我正在使用引导框架

html

  <div class="row index-banner">

    <div class="col-xs-6">
      <div class="latest-mobile">
        <h1> releases?</h1>    
        <p>We got you </p>
        <p>Find out more ></p>
        </div>
    </div>

    <div class="col-xs-6">
       <div class="sponge-bob">
        <h1>We have just ....</h1>
        <p>Let your kids enjoy .</p>
        <p>Find out more ></p>
        </div>
    </div>

  </div>

CSS

html,
body {
  width: 100%;
  height: 100%;
}

.col-xs-6 .sponge-bob {
  background: url(../../public/images/content/sponge-bob.jpg) no-repeat;
  margin-left: 5%;
  width: 100%;
  height: 100%;
  -webkit-background-size: cover;
  -moz-background-size: cover;
  background-size: cover;
  -o-background-size: cover;
  display: table;
  position: relative;
}

.col-xs-6 .latest-mobile {
  background: url(../../public/images/content/latest-mobile.jpg) no-repeat center center scroll;
  margin-left: 7%;
  width: 100%;
  height: 100%;
  -webkit-background-size: cover;
  -moz-background-size: cover;
  background-size: cover;
  -o-background-size: cover;
  display: table;
  position: relative;
}

Answer 1

这可能会解决您的问题

.latest-mobile,
.sponge-bob {
  min-height: 290px;
}

Answer 2

很可能你需要定义最小高度，所以 设置min-height: 100%;