Ensemble ion-hauteur de la ligne de taille dans Ionic2

J'ai besoin de 3 lignes horizontales dans ma page: sur la première ligne contenant 3 colonnes, 2ème contenant 2 et le 3ème contenant 1; cependant, je ne suis pas en mesure de régler la hauteur des lignes. Tout cela doit être de même taille et d'occuper l'ensemble de la zone de contenu. Le code ci-dessous va rendre les lignes n'occupent qu'une petite partie de la zone de contenu. Si je spécifie la hauteur de la ligne de classe en % il ne change pas; cependant, en pixels, c'est à travailler, mais je ne veux pas que mon code pour être rigide. Merci d'avance pour toute aide!

<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>
InformationsquelleAutor Debo | 2017-08-03
  1. 13

    Je suis assez sûr que le problème, c'est que le réglage de la hauteur de chaque ligne à l'aide d'un pourcentage de la valeur, par rapport à la hauteur du contenant (le ion-grid). De sorte que vous pouvez le faire par le premier paramètre de la hauteur de la grille à 100% du contenu, et puis vous pouvez définir la hauteur des lignes à 33%:

    ion-grid {
  height: 100%;

  ion-row {
    height: 33.33%;
  }
}

    Vous pouvez prendre un coup d'oeil à ce travail plunker

    (Note: Dans le plunker les styles a été mis en ligne dans le code html, juste pour rendre la démonstration plus facile. Ils doivent être placés dans le page.scss fichier correspondant à cette page)

    InformationsquelleAutor sebaferreras