Question

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

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

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

我该如何解决这个问题？

更新1

我尝试在https://stackoverflow.com/a/24979148/5936814发布的解决方案，但由于某种原因，它不适合我。请看这个小提琴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>

Answer 2

你可以使用height：calc（100vh - 50px）;

其中50px是顶栏的高度，100 vh是视图高度的100％。

viewheight（vh）和viewwidth（vw）属性非常惊人

<div style="border: 2px solid red; height:50px"></div>

<div class="container-fluid" style="border: 2px solid black; height:calc(100vh - 50px);">

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

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

2 个答案: