如何确保内容永远不会在固定的材质工具栏下滚动？

Question

下面的演示作为一个素材工具栏，其样式如下：

mat-toolbar {
    display:flex;
    position: fixed;
    justify-content: space-between;
}

https://angular-material-toolbar-fixed-with-styling.stackblitz.io/

https://stackblitz.com/edit/Angular-Material-Toolbar-Fixed-with-styling？file=src%2fapp%2fapp.component.ts

我们应该如何防止lorem ipsum文本在固定工具栏下滚动？

我尝试将router-output包装在div中，并将margin-top:2rem放在div上，但这会将工具栏向下移动，如演示中所示。

Answer 1

将下面的样式从

.RouterOutlet {
  margin-top: 2rem;
}

至

.RouterOutlet {
  padding-top: 4rem; /* since mat-toolbar taking height of 64px. (1rem = 16px) */
}

@media (max-width: 599px) {
  .RouterOutlet {
    padding-top: 3.5rem;
  }
}