Как вертикально заполнить строку?

Question

Можно ли сделать столбцы вертикально заполнять оставшееся пространство внутри строки и/или вертикально центра без определенной высоты строки или столбца?

<div class="fluid-container"> 
    <div class="row"> 
     <div class="col-sm-6">This<br />Column<br />Has<br />Many<br />Lines<br />...<br />...<br />...<br />...</div> 
     <div class="col-sm-6 blueBackground">This be should centered and/or fill the background blue all the way to the last line of the first column</div> 
    </div> 
</div> 

Answer 1

Вы можете дать подвесную систему устанавливаемыми сотовыми table свойства, например:

HTML

<div class="fluid-container"> 
    <div class="row row-same-height"> 
     <div class="col-sm-6 col-sm-height">This<br>Column<br>Has<br>Many<br>Lines<br>...<br>...<br>...<br>...</div> 
     <div class="col-sm-6 col-sm-height blueBackground">This be should centered and/or fill the background blue all the way to the last line of the first column</div> 
    </div> 
</div> 

CSS

.blueBackground { 
    background-color: blue; 
    } 
    .col-sm-height { 
     display: table-cell; 
     float: none !important; 
    } 
    .row-same-height { 
    display: table; 
    width: 100%; 
} 

Working Example

Вы можете прочитать об этом больше здесь, и посмотреть примеры, как вы можете сделать это реагировать с media-queries: Bootstrap 3 responsive columns of same height