如何设计整个屏幕宽度的垫子工具栏

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

在你的 style.css 中添加这个body{margin:0}