如何让div填充剩余的垂直空间？

Question

我的页面有两个主要部分 1) 顶栏 2) 容器。顶栏的固定高度为 50px，容器应具有剩余高度。

我尝试将容器高度设置为 100%，但它无法正常工作，因为它使网页采用 100% + 50px。因此，我得到了一个我试图避免的垂直滚动条。

这是一个小提琴来演示我的问题。请使用全屏视图 http://www.bootply.com/ov2s9oOVku

我该如何解决这个问题？

更新1

我尝试了此处发布的解决方案/sf/answers/1748540391/，但由于某种原因它对我不起作用。请参阅这个小提琴http://www.bootply.com/9iyQJ7Trw2。

Answer 1

另一种方法是使用display: flex

html, body{
	height:100%;
    margin: 0;
}
.wrapper {
  display: flex;
  flex-flow: column;
  height: 100%;
}
.topbar {
  flex: 0 1 auto;
  height: 50px;
}
.container-fluid {
  flex: 1 1 auto;
}

<div class="wrapper">
  <div class="topbar" style="border: 2px solid red;"></div>

  <div class="container-fluid" style="border: 2px solid black;">
    <div class="row-fluid" style="border: 2px solid green;">
      <div class="col-lg-12"></div>
    </div>
  </div>
 </div>