如何設計mat-toolbar全屏寬度

Question

在這里，我使用Angular-Material ，我的環境是： Angular CLI: 6.0.5 ， Node: 10.1.0 ， OS: win32 x64 ， Angular: 6.0.3 ，我希望輸出如下：

要實現完全相同的頂部導航欄，我有mat-toolbar如下：

在.html

 <mat-toolbar class="topbar telative mat-toolbar mat-primary mat-toolbar-single-row" color="primary"  ng-reflect-color="primary" style="flex-direction: row; box-sizing: border-box; display: flex;position: fixed;" [class.mat-elevation-z24]="isActive">
    <button mat-icon-button (click)="snav.toggle()"><mat-icon>menu</mat-icon> 
    </button>
    <h1 class="example-app-name">Admin Panel</h1>
 </mat-toolbar>

在.ts

我只是為isActive提供了一個屬性

 isActive = true;

我的輸出絕對正常，但是mat-toolbar沒有覆蓋整個屏幕寬度，因此垂直滾動條正好位於mat-toolbar一側。 我希望在我的mat-toolbar下面有滾動條，如上圖所示。 如何將mat-toolbar的寬度設置為全屏。

Answer 1

要將mat-toolbar寬度設置為100％，您可以在css文件中執行類似操作

.fixed-header {
    position: fixed;
    top: 0;
    left: 0;
    z-index: 2;
    width: 100% !important;
}

Answer 2

在你的style.css中添加這個body{margin:0}