html - 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% 并且溢出了。这个想法也是将有几个专栏。

提前致谢!

fiddle :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;
}