как оформить мат-панель инструментов на всю ширину экрана

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>

дюймы

У меня просто есть одно свойство для isActive

 isActive = true;

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

Answer 1

В вашем style.css добавьте это body{margin:0}

Answer 2

Чтобы установить mat-toolbar width на 100%, вы можете сделать то же самое в вашем файле css

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