如何将宽度设置为当前路由器出口的 100%？

Question

我的网站有一个菜单栏，它位于主要组件 html 中，在这个 html 中也是另一个组件的应用程序选择器：

MainComponent.html

<div style="height:200px">This is my Menubar</div>
<app-test></app-test>

我想在我的 testComponent.html 中显示 3 个框。

我正在使用 flexLayout：https://github.com/angular/flex-layout

 <div fxLayout="column" fxLayoutAlign="space-between none" style="height: 100%">
   <div style="background-color: red">
    T1
  </div>
  <div style="background-color: blue">
    T2
  </div>
  <div style="background-color: yellow; height: 200px">
    T3
  </div>
 </div>

问题是因为有一个菜单栏，我得到了滚动行为，但我只希望最后一个框结束在我的屏幕底部。看这里：http://prntscr.com/nhwcbp

我怎样才能做到这一点？

https://stackblitz.com/edit/flex-layout-angular-material-xssepa

Answer 1

在 style.css 中放置以下样式：

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

删除 height: 100vh 并使用 flexbox

<div fxLayout="column" style="height:100%">
    <div fxLayout="row" fxLayoutAlign="center">
        <mat-card fxFlex="50">
            <div fxLayout="row">
                <div fxFlex="30" class="action-blurb">This is a blurb.</div>
                <div fxFlex="30" class="action-blurb" fxFlexOffset="5">This is a blurb.</div>
                <div fxFlex="30" class="action-blurb" fxFlexOffset="5">This is a blurb.</div>
            </div>
        </mat-card>
    </div>
    <div fxFlex="">
        <app-test></app-test>
    </div>
</div>

我希望这能达到 this demo

的效果

如何将宽度设置为当前路由器出口的 100%？

how do I set the width to 100% of the current router outlet?

css

angular

flexbox

angular-flex-layout