Bootstrap - 填充列的重新调整高度

Question

使用Bootstrap。我希望顶部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; 
}