CSS 等高 block

Question

我这里有一个 jsfiddle - http://jsfiddle.net/ktmzk3jk/

我想让方 block 上的红色背景高度相同。

我确定我可以使用 Jquery 来完成，但是是否有标准的 CSS 解决方案。

    <div class="container">

        <div class="row">

            <div class="col-sm-4 col"> 
                <div class="block">
                    <h3>65%</h3>
                    <p>Some Text Some Text</p>
                </div>
            </div>

            <div class="col-sm-4  col"> 
                <div class="block">
                    <h3>20%</h3>
                    <p>Some Text Some Text Some Text Some Text Some Text Some Text Some Text Some Text Some Text Some Text</p>
                </div>
            </div>

            <div class="col-sm-4  col"> 
                <div class="block">
                    <h3>5%</h3>
                    <p>Some Text Some Text Some Text Some Text Some Text Some Text Some Text Some Text</p>
                </div>
            </div>

        </div>

    </div>

Answer 1

像这样尝试 DEMO

CSS:

.row-full-height {
  height: 100%;
}
.col-full-height {
  height: 100%;
  vertical-align: middle;
}
.row-same-height {
  display: table;
  width: 100%;
  /* fix overflow */
  table-layout: fixed;
}
.col-xs-height {
  display: table-cell;
  float: none !important;
}

HTML:

<div class="row">
    <div class="row-same-height row-full-height">

      <div class="col-sm-4 col-xs-height col-full-height">...</div>
</div>
</div>