イオン列の高さサイズをIonic2に設定します

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）の高さに対して相対的であることであることをかなり確信しています。あなたが見てみることができ

ion-grid { 
    height: 100%; 

    ion-row { 
    height: 33.33%; 
    } 
} 

：33％であることをだから、最初のグリッドの高さを設定することにより、コンテンツを100％とすることを行うことができ、その後、あなたは、行の高さを設定することができますthis working plunker

（注意：plunkerではスタイルがちょうどデモを容易にするためにhtmlコードにインラインで配置されてきた彼らは、そのページに対応するpage.scssファイルに配置する必要があります。）