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

Question

我使用引导来建立我的网站，并在一个位置我有两个div互相堆叠在图像的右侧。只要浏览器超过767像素，两个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

创建包含服务框中一个div容器，以及技术规格包装盒。然后，在CSS中，使容器与图像高度相同。对服务和技术规格框执行此操作：

height:50%;