javascript - 为列设置相同的高度

Question

我正在使用 twitter-bootstrap 框架创建一个包含两栏的“文章”。一侧是文本，右侧是一列带有背景图片的列。

HTML

<article>

 <div class='container-fluid'>

  <div class="row">

    <div class="col-md-8 indx-img" style="background-image:url('...');">
    </div>

    <div class="col-md-4 col-md-pull-8">

      <div class="text-cell">
        <h1>ttitle</h1>
        <h3>text</h3>
      </div>

    </div>

    </div><!-- /#row -->

  </div><!-- /#post -->

</article>

我希望文章具有响应高度。 (% 或其他)随着屏幕尺寸的减小而缩小。我需要两列具有相同的高度(background-img 需要一个高度才能显示背景图像)

我当前的 css 使用 padding 为 background-img 列生成响应大小(padding: 16% 0;)，但不影响左列(我希望文本垂直居中在其专栏中)

我在文章中尝试了 height: 30%;，但它并没有给列本身增加任何高度。

Answer 1

Chris Coyier 对此已经有了很好的解决方案。我建议查看此内容:https://css-tricks.com/fluid-width-equal-height-columns/

文章示例:

HTML

<div id="css-table">
  <div class="col"><p>Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas.</p></div>
  <div class="col"><p>Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Vestibulum tortor quam, feugiat vitae, ultricies eget, tempor sit amet, ante. Donec eu libero sit amet quam egestas semper. Aenean ultricies mi vitae est. Mauris placerat eleifend leo.</p></div>
  <div class="col"><p>Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas.</p></div>
  <div class="col"><p>Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Vestibulum tortor quam, feugiat vitae, ultricies eget, tempor sit amet, ante. Donec eu libero sit amet quam egestas semper. Aenean ultricies mi vitae est. Mauris placerat eleifend leo.</p></div>
</div>

CSS

#css-table {
  display: table;
}
#css-table .col {
  display: table-cell;
  width: 25%;
  padding: 10px;
}
#css-table .col:nth-child(even) {
  background: #ccc;
}
#css-table .col:nth-child(odd) {
  background: #eee;
}