无法获得 div 包含路由器插座以使用 flex-layout 库进行 flex

Question

我在一个 angular 6 cli 生成的项目上玩 angular 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 没有填满所有可用的 space，因为根据上图中的黄色阴影区域，我最终得到了白色 space。

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

我以前在一个较旧的 angular 1.x 项目中使用过 angular-material，所以熟悉他们使用的典型 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%;
}

只要 column 是 body 的直接子项，它就应该可以工作。如果没有，请制作一个代码笔或其他我们可以看到的东西。

希望对您有所帮助！

无法获得 div 包含路由器插座以使用 flex-layout 库进行 flex

Unable to get div containing router-outlet to flex with flex-layout library

css

angular

flexbox

angular-material2

angular-flex-layout