如何让 mat-sidenav 占据 mat-toolbar 下方的整个垂直空间？

Posted 2023-02-18

【中文标题】如何让 mat-sidenav 占据 mat-toolbar 下方的整个垂直空间？

【英文标题】：How can I make mat-sidenav take up entire vertical space underneath mat-toolbar?

【发布时间】：2021-08-21 04:53:21

【问题描述】：

我正在尝试使以下角度材料布局正常工作。我在顶部有一个mat-toolbar，在底部有一个mat-sidenav。无论我尝试什么，我都无法让mat-sidenav-container 占据整个页面高度。这是我使用网格布局的尝试。看起来它应该工作，但它没有。似乎mat-sidenav 自动缩小到mat-sidenav-content 内元素的高度。

这是我的html：

<div class="main-div">
  <app-header class="app-header"></app-header>
  <app-sidenav class="app-sidenav"></app-sidenav>
</div>

这是我的 CSS：

.main-div 
  display: grid;
  grid-template-columns: 1fr;
  grid-template-rows: auto 1fr;


.app-header 
  grid-column: 1 / 2;
  grid-row: 1 / 2;


.app-sidenav 
  grid-column: 1 / 2;
  grid-row: 2 / 3;

【参考方案1】：

尝试添加这个

.main-div 
   display: grid;
   grid-template-columns: 1fr;
   grid-template-rows: auto 1fr;
   height: 100vh;

.mat-sidenav-container 
   height: 100%;