在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%; 
    } 
} 

你可以看看this working plunker

（注：在plunker樣式已經內嵌放置在HTML代碼只是爲了讓演示更容易，他們應該被放置在對應於頁page.scss文件）