Сохранение двух штабелированных разделов одинаковой высоты

Question

Я использую bootstrap для создания своего сайта, и в одном месте у меня есть два divs, уложенных друг на друга справа от изображения. Каждый из двух разделов должен быть наполовину высотой изображения, если браузер превышает 767 пикселей, а также должен быть отзывчивым.

Вот 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 контейнер, который содержит в себе как коробку обслуживания, а также технические характеристики Box , Затем в css сделайте контейнер той же самой высоты, что и изображение. Сделайте это в Службе обслуживания и технических характеристик:

height:50%;