使 div 填充导航和页脚之间的 space，但使用 angular 组件

Question

我一直试图从这个postMake 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。在 app-table 中，我有一个 ngx-datable ，我希望它尽可能地伸展到它位于部分和页脚之间的容器。但是现在没有页面是半高 body 是 100% 但它不遵守。

看起来像这样

我想知道如何确保页面本身不滚动 table 增长到中间部分那么多，其他任何东西都不会滚动。 ngx-datable 处理固定 header 和滚动。

当我只有 container-fluid 时，我可以让它工作。

Answer 1

要使 .container-fluid 伸展以覆盖剩余的 space，您需要围绕它的父元素和 <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

使 div 填充导航和页脚之间的 space，但使用 angular 组件

Making div to fill the space between nav and footer but with angular components

flexbox

ngx-datatable

angular