无法使用flex-layout库将包含router-outlet的div转换为flex

Question

我在角度6 cli生成的项目中使用角度flex-layout进行游戏，并且很难获得路由器插座来填充列布局中的可用高度。

在我的根应用程序组件标记中，我有以下内容：

<div fxLayout="column" fxFlex>
  <app-header-bar></app-header-bar>
  <div fxFlexFill>
    <router-outlet></router-outlet>
  </div>
  <app-navbar></app-navbar>
</div>

呈现为：

包含我的路由器插座的div没有填满所有可用空间，因为我根据上图中的黄色阴影区域得到了空格。

我尝试将height:100%应用于html和body元素，但这没有任何区别。

我之前在较早的角度1.x项目中使用了角度材质，所以熟悉他们使用的典型flex属性方法，但我必须承认我发现flex-layout库更难以开始工作

还有其他人遇到类似的问题吗？我觉得我错过了一些明显的东西！

由于

Answer 1

试试这个：

<div fxLayout="column" fxFlexFill>
  <app-header-bar></app-header-bar>
  <div fxFlex>
    <router-outlet></router-outlet>
  </div>
  <app-navbar></app-navbar>
</div>

<强> styles.scss

html,
body {
    margin: 0;
    padding: 0;
    position: absolute;
    width: 100%;
    height: 100%;
}

只要列是身体的直接子，它就应该有效。如果没有，请制作一个codepen或我们可以看到的东西。

希望有所帮助！