Как сделать так, чтобы содержимое никогда не прокручивалось под фиксированной панелью инструментов материала?

Question

Приведенная ниже демонстрация в виде панели инструментов материала в следующем стиле:

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

Полный экран

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

Stackblitz

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