Größe der Ionenreihenhöhe in Ionic2 einstellen

Question

Ich brauche 3 horizontale Zeilen auf meiner Seite: die erste Zeile enthält 3 Spalten, die zweite enthält 2 und die 3 enthält 1; Allerdings kann ich die Höhe der Zeilen nicht festlegen. Es sollte alles gleich groß sein und den gesamten Inhaltsbereich einnehmen. Der folgende Code bewirkt, dass die Zeilen nur einen kleinen Teil des Inhaltsbereichs belegen. Wenn ich die Höhe der Zeilenklasse in% festlege, ändert sie sich nicht; in Pixeln funktioniert es, aber ich möchte nicht, dass mein Code so starr ist. Vielen Dank im Voraus für jede Hilfe!

<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

Ich bin sicher, dass das Problem besteht darin, dass durch die Verwendung eines Prozentwertes der Höhe jeder Zeile Einstellen der Höhe des Behälters relativ ist (die ion-grid). So können Sie das tun, indem Sie zuerst die Höhe des Gitters Einstellung der 100% des Inhalts zu sein, und dann können Sie die Höhe der Zeilen Satz 33% betragen:

ion-grid { 
    height: 100%; 

    ion-row { 
    height: 33.33%; 
    } 
} 

Sie einen Blick darauf werfen können this working plunker

(Anmerkung:. im Plunker die Stile inline in dem hTML-Code platziert wurden nur die Demo erleichtern Sie sollen auf dieser Seite in der page.scss-Datei abgelegt entspricht)