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％？

1 个答案: