how to design mat-toolbar full width of the screen

Question

Here, I am using Angular-Material in which my environment are : Angular CLI: 6.0.5 , Node: 10.1.0 , OS: win32 x64 , Angular: 6.0.3 and I want the output like this:

To implement exactly same top nav bar I have mat-toolbar as follows:

In .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>

In .ts

I simply have one property for isActive

 isActive = true;

My output is absolutely fine but the mat-toolbar does not cover the full width of screen as a result the vertical scroll bar is coming just in side of mat-toolbar . I want to have is scroll bar below my mat-toolbar as in the image above. How can I set the width of mat-toolbar to full screen.

Answer 1

To set mat-toolbar width to 100% you can do similar in your css file

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

Answer 2

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