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

Posted 2023-03-06

【中文标题】在 Ionic2 中设置离子行高度大小

【英文标题】：Set ion-row height size in Ionic2

【发布时间】：2018-01-10 15:09:45

【问题描述】：

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

【参考方案1】：

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

ion-grid 
  height: 100%;

  ion-row 
    height: 33.33%;
  

你可以看看this working plunker

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

【讨论】：

无法正确旋转屏幕。好像内容更多在 col - 33.33% 会裁剪内容