要填充列的行的高度 - 引导程序布局

Question

我知道这对大多数人来说可能很容易，但我对这个问题一直坚持不懈。

我需要实现这样的设计： Layout Design

...而现在我有了这个Current layout。一般结构与COL-3和COL-9连胜，这COL-9有两行，一个用于名称和职位名称，另一个用于页面中的统计信息（每个用户都是col-3）。我需要他们来填充他父母的身高，但身高属性不起作用。这可能是一个干净的解决方案？非常感谢。

这里是结构，它非常简单寿。

<div class="row profile-header"> 
<div class="col-md-3 user-image text-center"> 
    <img ...> 
    <span>..</span> 
</div> 
<div class="col-md-9"> 
    <div class="row"> 
    <div class="col-md-12"> 
     <h2 class="text-white">...</h2> 
     <h4 class="text-muted">...</h4> 
    </div> 
    </div> 
    <div class="row text-center"> 
    <div class="col-md-3 stat"> 
     <h3>...</h3> 
     <small>...</small> 
    </div> 
    ... 
    </div> 
</div> 

Answer 1

父使用position: relative，然后对孩子position:absolute; bottom: 0;。

Nice explanation there.

Answer 2

Flexbox的将是我的建议，虽然CSS表可能是一种选择了。

Codepen Demo

片段演示（全屏查看）

.user-image { 
 
    background: pink; 
 
} 
 
.user-image img { 
 
    display: block; 
 
    margin: auto; 
 
} 
 
.profile-header { 
 
    display: flex; 
 
} 
 
.right { 
 
    background: #c0ffee; 
 
    display: flex; 
 
    flex-direction: column; 
 
} 
 
.stats { 
 
    margin-top: auto; 
 
} 
 
.stat { 
 
    background: lightgrey; 
 
}

<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css" rel="stylesheet" /> 
 
<div class="row profile-header"> 
 
    <div class="col-md-3 user-image text-center"> 
 
    <img src="http://www.fillmurray.com/300/200" alt="" /> 
 
    <span>User Ranking</span> 
 
    </div> 
 
    <div class="col-md-9 right"> 
 
    <div class="row"> 
 
     <div class="col-md-12"> 
 
     <h2 class="text-white">User Name</h2> 
 
     <h4 class="text-muted">reference</h4> 
 
     </div> 
 
    </div> 
 
    <div class="row text-center stats"> 
 
     <div class="col-md-3 stat"> 
 
     <h3>Some Stat</h3> 
 
     <small>Some Stat</small> 
 
     </div> 
 
     <div class="col-md-3 stat"> 
 
     <h3>Some Stat</h3> 
 
     <small>Some Stat</small> 
 
     </div> 
 
     <div class="col-md-3 stat"> 
 
     <h3>Some Stat</h3> 
 
     <small>Some Stat</small> 
 
     </div> 
 
     <div class="col-md-3 stat"> 
 
     <h3>Some Stat</h3> 
 
     <small>Some Stat</small> 
 
     </div> 
 
    </div> 
 
    </div>