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" <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>工作

见文档说

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

SQLite database

md-grid-list rowHeigh =“fit”无效。是否有替代解决方案

1 个答案: