Angular2 Material 网格全高

Question

我开始学习angular 2 material 很迷茫，因为我在文档中找不到很多东西，官方material.io css 是用术语写的类，而 angular material 使用 "directive-like" 个对象。

我想简单地让我的网格全屏高度（高度 100%），但我找不到这么简单的例子。

这是从 angular2 material 网站获取的最基本的网格，但是，这里的行是固定的 1:1 比例而不是 100% 高度：

https://stackblitz.com/edit/angular-fp1akt-hotvqw?file=app/grid-list-overview-example.html

如果我没记错的话，网格是布局的基本构建块，将在其中添加其他 html 元素。

Answer 1

我建议您使用 Angular 中的 FlexLayout。这是一个独立的库，可让您高效地管理所有位置问题。

这比material的网格更强大。

加上Angular Material，这是顶！

Answer 2

我想你可以用 rowHeight: 'fit' 来实现。

Fit: Setting rowHeight to fit This mode automatically divides the available height by the number of rows. Please note the height of the grid-list or its container must be set.

见https://material.angular.io/components/grid-list/overview#setting-the-row-height

Answer 3

在最新的 angular material 上，您可以按照以下步骤操作：

<mat-grid-list cols="3" rowHeight="100%">
    <mat-grid-tile colspan="2" rowspan="1" style="background: grey;" ></mat-grid-tile>
    <mat-grid-tile colspan="1" rowspan="1" style="background: blue;" ></mat-grid-tile>
</mat-grid-list>

Angular2 Material 网格全高

Angular2 Material Grid Full height

material-design

angular-material2

angular