Angular material 使用角度材质的静态标题菜单

问题:

我尝试使用类似于页面顶部的角度材质来获取静态标题菜单组件。这是否可能与任何材质组件有关，请任何人帮助定制一个。

使用来自Angle material的。
利用

css属性

和

html标记

实现静态标题

方法：

1.将

高度：100%，宽度：100%

指定给

html、body

和您的应用程序组件（根组件）。
二,。制作两个容器-一个

标题

，另一个

内容容器

。
三,。将

高度：50px

指定给

标题

，剩余高度即

计算（100%-50px）

指定给

内容容器

    -------- app.component.ts--------
    <section class="app-container">
       <header>
           <mat-toolbar color="primary">
              Static Header
           </mat-toolbar>
       </header>
       <section class="content-container">
          <p>Paragraph with content overflowing data</p>
       </section>
    </section>
-------------------------------------------------------------
      html, body, .app-container {
          margin: 0;
          padding: 0;
          height: 100%;
          width: 100%;
       }

        mat-toolbar {
          height: 100% !important;
        }    

        .app-container header {
          height: 50px;
          max-height: 50px;
          box-shadow: 0 3px 5px -1px rgba(0,0,0,.2), 
                      0 6px 10px 0 rgba(0,0,0,.14), 
                      0 1px 18px 0 rgba(0,0,0,.12);
        }
        .app-container .content-container {
          height: calc( 100% - 50px);
          overflow: auto;
          padding: 10px;
          word-break: break-all;
        }

-----------app.component.ts--------
静态标题
数据内容溢出的段落

-------------------------------------------------------------
html、正文、.app容器{
保证金：0；
填充：0；
身高：100%；
宽度：100%；
}
垫工具栏{
身高：100%！重要；
}    
.应用程序容器标题{
高度：50px；
最大高度：50px；
盒影：0 3px 5px-1px rgba（0,0,0,2），
0 6px 10px 0 rgba（0,0,0,14），
1px18px0rgba（0,0,0,12）；
}
.app容器.内容容器{
高度：计算（100%-50px）；
溢出：自动；
填充：10px；
单词break：打破一切；
}

---

我很高兴，我帮了忙。