angular - Flex layout used in mat-drawer-content
问题描述
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>
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.
推荐阅读
- python - BeautifulSoup 从 Indeed 中提取数据的问题
- android - 带有异步回调的 DiffUtil 只显示一次列表并且不更新
- spring-boot - 如何修复 log4j yaml 配置问题“主错误无法创建 org.apache.logging.log4j.core.appender.RollingFileAppender 类型的插件...”
- javascript - 如何专注于在与触发器不在同一父元素中的叠加层中打开的输入
- javascript - 如何从 React 中的 DateTime 选择器获取值?
- javascript - 如何检测浏览器窗口是否滚动到右边缘?
- swift - Swift - 将最近使用的子层存储在数组(或变量中)中,并使用按钮循环浏览它们?
- firebase - Firestore 用户管理最佳实践?
- debugging - 在 Visual Studio 调试中遇到异常时,悬停异常会显示 null
- javascript - HTML CSS 中的动画