Angular router-outlet内容覆盖在mat-toolbar顶部

Question

在我的app.component.html中，我在路由器插座上方放置了一个工具条垫，如下所示：

<mat-toolbar color="primary">
  <span>Tattoo Share!</span>
</mat-toolbar>
<router-outlet></router-outlet>

问题是路由器插座的内容覆盖在工具栏的顶部。此内容应位于工具栏的下方。我该如何纠正这个问题呢？我试着把东西放在块元素中，比如div，但是没有用。在工具栏上也有这样的CSS：mat-toolbar { position: fixed }

Answer 1

使用工具栏上的一些CSS使其正常工作：

mat-toolbar {
  position: fixed;
  top: 0;
  z-index: 1;
}

Answer 2

您应该在styles.css中使用CSS来放置一个边距--底部等于工具栏本身的高度。还要使用ID，这样它就不会应用于其他工具条

mat-toolbar#over-router {
    margin-bottom: 40px; // check the actual height in the browser
}

Answer 3

您可以使用flex layout。

<div class="home-main">
     <app-toolbar></app-toolbar>
     <div class="home-container">
         <router-outlet></router-outlet>
     </div>
</div>

.home-main {
  height: 100%;
  display: flex;
  flex-direction: column;
}