保持两个堆叠的Div相同的高度

Question

我正在使用bootstrap构建我的网站，并且在一个位置我有两个div在图像的右侧堆叠在一起。只要浏览器超过767px，两个div应各自为图像高度的一半，并且响应也是如此。

这是一个jsfiddle：http://jsfiddle.net/dC7z5/

<div class='row subhead'>
  <div class='col-sm-9'>
    <img src="http://placekitten.com/900/554" class="img-responsive" />
  </div>

  <div class='col-sm-3'>
      <div class='row'>
          <div class='col-sm-12 services'>
            <p>Services</p>
              <ul>
                  <li>first service</li>
                  <li>another service</li>
              </ul>
          </div>
      </div>
      <div class='row'>
          <div class='col-sm-12 specs'>
              <p>Tech Specs</p>
              <ul>
                  <li>one spec</li>
                  <li>second spec</li>
              </ul>
          </div> <!-- end specs -->
      </div>
  </div>
</div>

以下是我正在尝试做的事情的图像：http://laurenpittenger.com/here/wp-content/uploads/2014/01/Screen-Shot-2014-01-05-at-4.46.31-PM.png

Answer 1

创建一个包含Service框和Tech Specs Box的div容器。然后，在css中，使容器与图像的高度相同。这是服务和技术规格框：

height:50%;