Как держать панель инструментов всегда наверху, когда cdk-virtual-scroll-viewport заполняет остальную часть высоты?

Question

У меня есть страница, которая содержит mat-toolbar и cdk-virtual-scroll-viewport.Я хочу, чтобы mat-toolbar всегда находился сверху экрана, в то время как cdk-virtual-scroll-viewport заполняет остальную часть экрана.

Я попытался установить высоту cdk-virtual-scroll-viewport в 100vh, однако, когда я достигнуконец списка, панель инструментов исчезла.

Вот пример кода, который я подготовил: https://stackblitz.com/edit/angular-lbxmce

Как вы можете видеть, когда мы прокрутили до конца дна,нам нужно вернуться к первому элементу, чтобы панель инструментов снова появилась.Как я могу исправить положение панели инструментов, сохраняя при этом список заполняющим остальную часть экрана?

Спасибо.

Answer 1

Рекомендуется реализовать макет для своей страницы и добавить mat-toolbar к макету.

Это пример:

...

const routes: Routes = [
 {
   path: 'test',
   component: TestLayoutComponent,
   children: [
     { path: '', component: TestComponent },
   ]
 }
];

@NgModule({
 imports: [RouterModule.forChild(routes)],
 exports: [RouterModule]
})
export class TestRoutingModule { }

Подробнее

Answer 2

Вам нужно знать высоту панели инструментов , тогда вы можете рассчитать высоту области просмотра:

.example-viewport {
  height: calc(100vh - 64px);
  margin: 4px;
}