css - CSS相同的高度块

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

我想使块上的红色背景具有相同的高度。

我敢肯定我可以用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>

最佳答案

像这样尝试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>