Как использовать сетку-список в Angular Material, чтобы все содержимое страницы отображалось между верхним и нижним колонтитулами?

Question

Я использую Angular 6 и материал 6.4.7.Мне нужно реализовать grid-список на главной странице.Сделайте так, чтобы верхний и нижний колонтитулы имели фиксированную ширину, а содержимое занимало остальное пространство.Как мне это сделать?

<mat-grid-list cols="1">
<mat-grid-tile-header>
    <app-header></app-header>
</mat-grid-tile-header>
<mat-grid-tile>
    <router-outlet></router-outlet>
</mat-grid-tile>
<mat-grid-tile-footer>
    <app-footer></app-footer>
</mat-grid-tile-footer>

Answer 1

MatGridList не является инструментом макета! Это компонент для отображения списка плиток в формате гибкой сетки.

На основе вашего описаниято, чего вы хотите достичь, довольно просто с помощью стандартных флексбоксов HTML и CSSЕсли вам нужна большая гибкость или адаптивный макет, обратите внимание на Angular Flex-Layout .