Mat-sidenav-содержание вызывает полосу прокрутки на высоте: 100% - PullRequest
Новая
       15

Mat-sidenav-содержание вызывает полосу прокрутки на высоте: 100%

0 голосов
/ 20 марта 2020

Я заметил, что когда я не устанавливаю высоту mat-sidenav-container и mat-sidenav-content равным 100%, я получаю уродливый белый блок внизу. Когда я устанавливаю высоту, появляется полоса прокрутки.

Я думаю, что это может быть связано с панелью инструментов, поскольку высота дополнительного пространства, добавляемого с полосой прокрутки, равна высоте панели инструментов. 

<mat-toolbar *ngIf='!isLogin' color="primary" class="app-toolbar mat-toolbar mat-elevation-z6">
  <mat-toolbar-row>
    <h3>Admin tool</h3> &nbsp; &nbsp;
    <button mat-button [routerLink]="['/dashboard']">Dashboard</button>
    <button mat-button [matMenuTriggerFor]="manage" (click)="menuOut = true">Manage Content <mat-icon
        *ngIf="!menuOut">keyboard_arrow_down </mat-icon>
      <mat-icon *ngIf="menuOut">keyboard_arrow_up </mat-icon>
    </button>
    <mat-menu (closed)="menuOut = false" #manage="matMenu">
      <button mat-menu-item [routerLink]="['/categories']" class="mat-menu-button">Categories</button>
      <button mat-menu-item [routerLink]="['/quizzes']" class="mat-menu-button">Quizzes</button>
      <button mat-menu-item [routerLink]="['/questions']" class="mat-menu-button">Questions</button>
    </mat-menu>
    <button mat-button [routerLink]="['/results']">Results</button>
    <button mat-button [routerLink]="['/users']">Users</button>
    <span class="example-spacer"></span>
    <div>
      <button mat-icon-button [routerLink]="['settings']">
        <mat-icon>settings</mat-icon>
      </button>&nbsp;&nbsp;
      <button (click)="onLogout()" mat-icon-button>
        <mat-icon>logout</mat-icon>
      </button>
    </div>
  </mat-toolbar-row>
</mat-toolbar>
<mat-sidenav-container >
  <mat-sidenav-content>
    <router-outlet></router-outlet>
  </mat-sidenav-content>
</mat-sidenav-container>

Компонент css

@import 'https://fonts.googleapis.com/icon?family=Material+Icons';

.example-spacer {
  flex: 1 1 auto;
}

:host {
  min-height: 100%;
}

h3,
button {
  color: #fff3e0;
}

.mat-menu-button {
  color: black;
}

.mat-icon-button:hover {
  color: #ffcd80;
}

стили. css

@import 'https://fonts.googleapis.com/icon?family=Material+Icons';

html,
body,
mat-sidenav-container,
mat-sidenav-content {
  height: 100%;
}

.mat-paginator {
  background-color: transparent;
}

.content-container {
  height: 100%;
}

.content-area {
  padding: 0 !important;
}

.main-content-title {
  margin-top: 0;
}

.main-content-header {
  padding: 15px 30px 15px 30px;
  border-bottom: 1px solid #ccc;
}

.content-group {
  padding: 0px 30px 0px 30px;
  max-width: 1150px;
}
...