使div填充导航和页脚之间的空间，但使用角度组件

Question

我一直在努力从这篇Make a div fill the height of the remaining screen space帖子中获得答案

但是我无法使其适合我。我将导航作为单独的组件，在导航之后，容器将容纳所有其他div，因此我需要一个来拉伸和使用flex列。

这是我做的示例页面的结构。

<nav class="navbar navbar-dark bg-primary navbar-expand-md justify-content-between fixed-top ng-tns-c0-0 ng-star-inserted">...</nav>
<div class="container-fluid">
  <section>
    <div class="row">
      <div class="col p-5 ">
        <form>
          <input placeholder="I am a field"  class="md-form  form-control"/>
        </form>
      </div>
    </div>
  </section>
  <app-table-container class=""></app-table-container>
  <footer>
    <div class="row">
      <div class="col p-5 ">
        <button class="btn btn-lg"> I am a button</button>
      </div>
    </div>
  </footer>
</div>

这是一些CSS，因为我在组件中也有一些。

.container-fluid{
  display:flex;
  flex-flow: column;
  padding-top:50px;
  background-color:red;
  height: calc(100% - 50px);

}

section{
  background-color: #ffc727;
  flex:0 1 auto;
}


footer{
  background-color: #9cc8ff;
  flex:0 1 auto;
}

我的路线正在加载到容器流体中，所以我不想在每页中都添加Nav。在应用程序表内部，我有一个ngx数据表，我希望它可以扩展其在部分和页脚之间的容器。但是现在没有页面是半身高的身体是100％，但它没有遵守。

看起来像这样

我想知道如何确保页面本身不会滚动，表格增长不会像中间部分那样增长，并且其他任何东西也不会滚动。 ngx-datable处理固定的标题和滚动。

当我只有容器流体时，就可以使它工作。

Answer 1

要使.container-fluid延伸以覆盖剩余空间，您需要在其周围加上<nav>的父元素。它必须具有display: flex和flex-direction: column，并且.container-fluid必须具有flex-grow: 1。

---

<div class="wrapper">
    <nav>...</nav>
    <div class="container-fluid">...</div>
</div>


.wrapper {
  height: 100vh;
  display: flex;
  flex-direction: column;
}

.container-fluid{
  display:flex;
  flex-flow: column;
  padding-top:50px;
  background-color:red;
  flex-grow: 1;
}

JSFiddle