如何设计垫子工具栏的全宽屏幕答案

【问题标题】：how to design mat-toolbar full width of the screen如何设计垫子工具栏的全宽屏幕
【发布时间】：2018-12-06 01:56:31
【问题描述】：

在这里，我使用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的宽度设置为全屏。

【问题讨论】：

你能发布一个你得到的例子吗？

标签： css angular-material material-design angular6

【解决方案1】：

在你的 style.css 中添加 thisbody{margin:0}

【讨论】：

【解决方案2】：

要将 mat-toolbar 宽度设置为 100%，您可以在您的 css 文件中执行类似操作

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

【讨论】：

当我这样做时，标题会阻止另一个组件的标题。它覆盖在其他组件上。