在mat-drawer-content中使用的Flex布局
在mat-drawer-content中使用的Flex布局
提问于 2018-05-29 18:11:57
我在导航抽屉中使用了angular flex布局，如下所示
<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>但看起来像是
如何将垫子-抽屉-容器伸展到底部？
回答 3
Stack Overflow用户
回答已采纳
发布于 2018-05-29 19:04:40
你的问题来自于你的项目没有被拉伸的事实。
首先给你的html和body标签一个完整的高度：
html, body {
height: 100%;
}接下来，您必须创建一个主容器，您将在其中放置页眉、容器和页脚。这个主容器将被拉伸和弯曲。
<div class="container" fxLayout="column">
<header fxFlex="10%"/>
<drawer fxFlex/>
<footer fxFlex="10%"/>
</div>在此设置中，页眉和页脚将分别占据页面的10%，而抽屉将占据剩余空间。
Stack Overflow用户
发布于 2018-11-15 20:56:26
.menu-container {
position: absolute;
top: 0;
bottom: 0;
left: 0;
right: 0;
}
<mat-sidenav-container class="menu-container">这对我很有效
Stack Overflow用户
发布于 2018-05-29 18:36:12
你可以使用'fullscreen‘将其延伸到页脚。
<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>页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持
原文链接：
https://stackoverflow.com/questions/50581755
复制相关文章
相似问题
腾讯云开发者
Copyright © 2013 - 2026 Tencent Cloud. All Rights Reserved. 腾讯云 版权所有
深圳市腾讯计算机系统有限公司 ICP备案/许可证号：粤B2-20090059 
粤公网安备44030502008569号
腾讯云计算（北京）有限责任公司 京ICP证150476号 | 京ICP备11018762号