angular - md-grid-list rowHeigh ="fit"不工作。是否有替代解决方案

Question

我正在创建一个具有物化设计的 angular2 应用程序。我正在尝试创建一个布局，我希望将布局分为两部分。为此，我使用了 md-grid-list。引用文档 https://material.angular.io/components/grid-list/overview为了那个原因。 md-grid-list rowHeigh="fit" 不工作。是否有替代解决方案使行高与屏幕高度相似。

这是我正在处理的 project.component.html 文件。

<md-toolbar><h2>Projects</h2></md-toolbar>
<md-grid-list cols="50" rowHeight="fit" >
  <md-grid-tile [colspan]="15"> 1 </md-grid-tile>
  <md-grid-tile [colspan]="35" >2</md-grid-tile>
</md-grid-list>

当我提供 style="height:300px" 时，它看起来像这样。 enter image description here

但我想将整个屏幕一分为二。所以我使用了 cols="2"。我可以更改高度以使其适合整个屏幕。但我无法为内容提供固定高度，因为它可以根据内容中可用的数据进行更改。

Answer 1

您可以使用 style="height: calc(100vh - 24px)" 将任何元素的高度设置为 100%你有 2 列但告诉 cols=50在md-grid-list也将高度应用于您的 md-grid-list对于 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.

<md-grid-list cols="2">
  <md-grid-tile style="height: calc(100vh - 24px)">1</md-grid-tile>
  <md-grid-tile style="height: calc(100vh - 24px)">2</md-grid-tile>
</md-grid-list>