如何设计屏幕全尺寸垫工具栏

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}