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

Bootstrap - 填充列的重新高度

1 个答案: