在尊重工具栏高度的同时创建div填充高度

Question

我正在制作一个简单的布局，包含工具栏，sidenav和内容div：

Here is a stackblitz of the issue

  

sidebar.component.html：

<mat-sidenav-container class="full-layout-container" autosize>
  <mat-sidenav #sidenav class="sidenav-container" mode="side" opened="true">
    <mat-nav-list>
      <mat-list-item>
        <button mat-icon-button (click)="isExpanded = !isExpanded">
          <mat-icon *ngIf="!isExpanded">chevron_right</mat-icon>
          <mat-icon *ngIf="isExpanded">chevron_left</mat-icon>
        </button>
      </mat-list-item>
      <mat-list-item>
        <mat-icon mat-list-icon>home</mat-icon>
        <p matLine *ngIf="isExpanded">Home</p>
      </mat-list-item>
    </mat-nav-list>
  </mat-sidenav>
  <div class="inner-content">
    <mat-toolbar class="mat-elevation-z4 no-margin" color="primary"></mat-toolbar>
  </div>
</mat-sidenav-container>

  

sidebar.component.css

.full-layout-container {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
}

.inner-content {
  display: flex;
  height: 100%;
  align-items: center;
  justify-content: center;
  background-color: grey;
}

.no-margin {
  width: 100%;
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
}

我想在inner-content附近添加一个边距，以便在我的5px下面和所有其他边上都有mat-toolbar边距。当我当前应用保证金时，页面滚动，我相信这是由于我的标题上的绝对定位。当我知道浏览器高度时，我可以让它工作，但我不确定如何使其扩展到所有浏览器大小。

我想要实现的目标：

Answer 1

min-height: calc(100vh - 60px);

其中60px = 5px页边距x2 + 50px标题高度示例，那么你的内容在整个屏幕上都是准确的，带边距