Question

我的页面需要3个水平行：第一行包含3列，第2行包含2，第3行包含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%;
  }
}

您可以查看 this working plunker

（注意：在plunker中，样式已经内嵌在html代码中，只是为了使演示更容易。它们应该放在与该页面对应的page.scss文件中）

在Ionic2中设置离子行高度

1 个答案: