Angular2 材质网格全高答案

【问题标题】：Angular2 Material Grid Full heightAngular2 材质网格全高
【发布时间】：2018-12-16 05:05:19
【问题描述】：

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

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

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

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

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

【问题讨论】：

你试过mat-grid-tile.mat-grid-tile { height: 100%; }吗？
听起来不错，但不起作用

标签： angular material-design angular-material2

【解决方案1】：

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

这比材料网格更强大。

使用 Angular 材质，这是最棒的！

【讨论】：

【解决方案2】：

我认为您可以通过rowHeight: 'fit' 实现这一目标。

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

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

【讨论】：

【解决方案3】：

在最新的角度材质上，你可以这样做：

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

【讨论】：