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

Question

我正在使用 bootstrap 来构建我的网站，在一个位置我有两个 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%;