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"它看起来像这样。 在此处输入图片说明

但是我想把整个屏幕一分为二。所以我用了cols="2"。我可以改变高度以使其适合整个屏幕。但是我不能给内容一个固定的高度，因为它可以根据内容中可用的数据进行更改。

Answer 1

你可以在任何元素的高度设置为100％，与style="height: calc(100vh - 24px)"你有2列，但讲cols=50的md-grid-list也适用高度，你md-grid-list的rowHeight="fit"工作

看文档说

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

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