在 Ionic2 中设置离子行高度大小

Question

我的页面需要 3 行水平行：第一行包含 3 列，第二行包含 2 列，第三行包含 1;但是我无法设置行的高度。它们的大小应该相同，并占据整个内容区域。下面的代码将使行仅占据内容区域的一小部分。 如果我以%为单位指定行类的高度，它不会改变;但是以像素为单位它可以工作，但我不希望我的代码如此僵化。提前感谢任何帮助！

<ion-content>
<div style = "height : 37%; width : 83px; width : 100%; padding : none; border-bottom: 1px solid #D8DFEC; margin : none; background-size: 100% 100%; background-position: center; background-image: url('images/MyHome.PNG'); border-top: 1px solid #D8DFEC; border-bottom: 1px solid #D8DFEC"></div>
<ion-grid>
<ion-row text-center>
<ion-col col-4>A</ion-col>
<ion-col col-4>B</ion-col>
<ion-col col-4>C</ion-col>
</ion-row>

<ion-row text-center>
<ion-col col-4>D</ion-col>
<ion-col col-4>E</ion-col>

</ion-row>
<ion-row text-center>
<ion-col col-4>F</ion-col>

</ion-row>
</ion-grid>
</ion-content>

Answer 1

我很确定问题是使用百分比值设置每行的高度是相对于容器的高度(ion-grid(。因此，您可以通过首先将网格的高度设置为内容的 100% 来做到这一点，然后将行的高度设置为 33%：

ion-grid {
height: 100%;
ion-row {
height: 33.33%;
}
}

你可以看看这个工作弹道

机(注意：在 plunker 中，样式已内联放置在 html 代码中，只是为了让演示更容易。它们应放置在与该页面对应的page.scss文件中(