Высота строк для заполнения столбца - макет Bootstrap

Question

Я знаю, что это может быть легко для большинства из вас, но я застрял в этой проблеме.

Мне нужно реализовать этот проект: Layout Design

... и теперь у меня есть это Current layout .The общая структура представляет собой ряд с Col-3 и Col-9, это кол-9 имеет две строки, одна для названия и названия задания, а другая для статистики на странице (col-3 для каждого из них). Мне нужно, чтобы они заполнили высоту его родителя, но свойство height не работает. Что может быть чистым решением? Большое спасибо.

Вот эта структура, это довольно простой tho.

<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

Отрывок 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>