Question

我已经开始学习角度2的材料，这非常令人困惑，因为我在文档中找不到很多东西，而官方material.io css是按照类编写的，而角度材料则使用“类指令”的对象。

我只想让我的网格全屏显示高度（高度为100％），但是我找不到这样简单的示例。

这是从angular2材质网站获取的最基本的网格，但是，此处的行具有固定的1：1比例，而不是100％的高度：

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

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

Answer 1

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

这比材料网格更强大。

有了Angular Material，这就是顶部！

Answer 2

在最新的角形材料上，您可以像下面这样进行操作：

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

Answer 3

我认为您可以使用rowHeight: 'fit'来实现这一目标。

适合：将rowHeight设置为适合此模式自动将可用高度除以行数。请注意，必须设置网格列表或其容器的高度。

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

Angular2材质网格全高

3 个答案: