html - 如何确保内容永远不会在固定 Material 工具栏下滚动？

Question

下面的演示作为 Material 工具栏，样式如下:

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

全屏

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

堆栈 Blitz

https://stackblitz.com/edit/angular-material-toolbar-fixed-with-styling?file=src%2Fapp%2Fapp.component.ts

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

我尝试将 router-outlet 包装在一个 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;
  }
}