覆蓋在墊子工具欄頂部的角度路由器出口內容

Question

在我的 app.component.html 中，我在路由器插座上方放置了一個墊子工具欄，如下所示：

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

問題是路由器插座的內容覆蓋在工具欄的頂部。 此內容應位於工具欄下方。 我應該如何糾正這個問題？ 我嘗試將東西放在塊元素中，例如 div 無濟於事。 mat-toolbar 上也有這個 CSS： mat-toolbar { position: fixed }

Answer 1

您應該在styles.css使用CSS 來放置一個等於工具欄高度的margin-bottom。 還要使用 ID，這樣它就不會應用於其他工具欄

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

Answer 2

您可以使用彈性布局。

<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;
}

Answer 3

在我的工具欄上使用一些 CSS 讓它工作：

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