ブートストラップ - カラムの残存高さを入力してください。

Question

ブートストラップの使用。コンテンツの内容に応じてトップdivを固定高さにし、親divの残りの高さを埋めるdivを作成します。全体の高さは100％にする必要があります。

HTML：

<div class="container-fluid"> 
    <div class="row"> 
    <div class="col-lg-2"> 
     <div id="test"> 
     <div> 
      Fixed height according to content. 
     </div> 
     <div class="fill"> 
      Rest of the height 
     </div> 
     </div> 
    </div> 
    </div> 
</div> 

CSS：

html, body{ 
    height: 100%; 
} 

.container-fluid, .row, .col-lg-6, #test{ 
    height: 100%; 
} 

.fill { 
    background-color: #FF0000; 
    height: 100% 
} 

下のdivが正確に100％とオーバーフローをあるようにそれはそうしかし。また、いくつかの列があるという考えもあります。

ありがとうございます！

フィドル：https://jsfiddle.net/eb8v57pe/4/

Answer 1

<div class="container-fluid"> 
    <div class="row"> 
    <div class="col-lg-2"> 
     <div id="test"> 
     <div class="header"> 
      Fixed height according to content. 
     </div> 
     <div class="fill"> 
      Rest of the height 
     </div> 
     </div> 
    </div> 
    </div> 
</div> 

@import url('http://twitter.github.com/bootstrap/assets/css/bootstrap.css'); 

html, body{ 
    height:100%; 
    padding: 0; 
    border: none; 
    margin: 0; 
} 

.container-fluid, .row, .col-lg-2{ 
    height: 100%; 
} 
#test { 
    display: table; 
    width: 100%; 
    height: 100%; 
} 

#test > .header { 
    display: table-row; 
    height: 1%; 
} 

#test > .fill { 
    display: table-row; 
    background-color: #FF0000; 
}