,可以通过以下步骤实现:
<mat-toolbar>
来创建工具栏,使用<mat-sidenav-container>
和<mat-sidenav>
来创建侧边栏。height: 10%;
,为侧边栏设置height: 90%;
。height: 100vh;
来确保父容器占据整个可用垂直空间。以下是一个示例代码:
<div style="height: 100vh;">
<mat-toolbar style="height: 10%;">工具栏</mat-toolbar>
<mat-sidenav-container style="height: 90%;">
<mat-sidenav mode="side" opened="true">侧边栏</mat-sidenav>
<mat-sidenav-content>
内容区域
</mat-sidenav-content>
</mat-sidenav-container>
</div>
在这个示例中,工具栏占据了父容器的10%的高度,侧边栏占据了父容器的90%的高度,确保它们共同占据了100%的可用垂直空间。
对于腾讯云相关产品和产品介绍链接地址,由于要求不能提及具体的云计算品牌商,我无法提供具体的链接。但你可以通过访问腾讯云的官方网站,搜索相关产品来获取更多信息。
领取专属 10元无门槛券
手把手带您无忧上云