要填充列的行的高度 - 引導程序佈局

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>