问题
I have used angular flex layout in navigation drawer like this
<mat-drawer-container>
<mat-drawer #drawer mode="over" >
<p>Drawer content</p>
<p>
<button mat-icon-button (click)="drawer.close()">
<mat-icon>clear</mat-icon>
</button>
</p>
</mat-drawer>
<mat-drawer-content fxLayout="row" fxLayoutAlign="start center">
<p>
<button mat-icon-button (click)="drawer.open()">
<mat-icon>menu</mat-icon>
</button>
</p>
<router-outlet></router-outlet>
</mat-drawer-content>
</mat-drawer-container>
but it looks like
how to stretch mat-drawer-container upto footer?
回答1:
Your issue comes from the fact that your items aren't stretched.
Start by giving your html and body tags a full height :
html, body {
height: 100%;
}
Next, you have to make a main container, where you will put your header, container, and footer. This main container will be stretched and flexed.
<div class="container" fxLayout="column">
<header fxFlex="10%"/>
<drawer fxFlex/>
<footer fxFlex="10%"/>
</div>
In this setup, your header and footer will take 10% of the page each, and the drawer will take the remaining space.
回答2:
.menu-container {
position: absolute;
top: 0;
bottom: 0;
left: 0;
right: 0;
}
<mat-sidenav-container class="menu-container">
This worked for me
回答3:
You can use 'fullscreen' to stretch it to footer.
<mat-drawer-container fullscreen>
<mat-drawer #drawer mode="over" >
<p>Drawer content</p>
<p>
<button mat-icon-button>
<mat-icon>clear</mat-icon>
</button>
</p>
</mat-drawer>
<mat-drawer-content fxLayout="row" fxLayoutAlign="start center">
<p>
<button mat-icon-button>
<mat-icon>menu</mat-icon>
</button>
</p>
<router-outlet></router-outlet>
</mat-drawer-content>
</mat-drawer-container>
来源:https://stackoverflow.com/questions/50581755/flex-layout-used-in-mat-drawer-content