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

我需要在我的页面中有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>

A.
B
C
D
E
F

我很确定问题在于，使用百分比值设置每行的高度是相对于容器的高度的（离子网格）。因此，您可以先将网格的高度设置为内容的100%，然后将行的高度设置为33%：

ion-grid {
  height: 100%;

  ion-row {
    height: 33.33%;
  }
}

您可以查看

---

（注意：在plunker中，样式已内联放置在html代码中，以使演示更容易。它们应放置在与该页面对应的

page.scss

文件中）

它无法正确旋转屏幕。如果内容在列中更多-33.33%将裁剪内容