mat-drawer-content 中使用的 Flex 布局 [英] Flex layout used in mat-drawer-content
问题描述
我在导航抽屉中使用了这样的 angular flex 布局
<mat-drawer #drawer mode="over" ><p>抽屉内容</p><p><button mat-icon-button (click)="drawer.close()"><mat-icon>clear</mat-icon>按钮></p></垫子抽屉><mat-drawer-content fxLayout="row" fxLayoutAlign="start center"><p><button mat-icon-button (click)="drawer.open()"><mat-icon>菜单</mat-icon>按钮></p><路由器插座></路由器插座></mat-drawer-content></mat-drawer-container>
但它看起来像
如何将 mat-drawer-container 拉伸到页脚?
您的问题来自于您的项目没有被拉伸的事实.
首先给你的 html 和 body 标签一个完整的高度:
html, body {高度:100%;}
接下来,您必须制作一个主容器,您将在其中放置页眉、容器和页脚.这个主容器将被拉伸和弯曲.
<header fxFlex="10%"/><抽屉fxFlex/><footer fxFlex="10%"/>
在此设置中,页眉和页脚各占页面的 10%,抽屉将占用剩余空间.
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?
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.
这篇关于mat-drawer-content 中使用的 Flex 布局的文章就介绍到这了,希望我们推荐的答案对大家有所帮助,也希望大家多多支持IT屋!