Ionique - Comment mettre en <Ion de défilement> hauteur de sorte qu'il s'adapte automatiquement à la résolution de tous les appareils?

Mon code est comme suit:

<ion-scroll style="height:200px;">
<ion-item  ng-repeat="items in Items" >
<!--repeat group-->
</ion-item>
</ion-scroll>

J'ai un défilement de l'affichage de la hauteur = 200px, cela semble ok sur de petits appareils, mais quand j'ai vue cela sur grand appareil, le contenu apparaît trop petite parce que la hauteur est '200px' qui est relativement faible. Alors, quelle est la bonne méthode de fixation? J'ai essayé d'utiliser la hauteur, en pourcentages, mais il n'a pas le fixer. S'il vous plaît, aide et désolé pour mon mauvais anglais.

OriginalL'auteur Biswas Khayargoli | 2015-09-08

  1. 17

    Utilisation vh unité au lieu de px.Vous pouvez définir vh valeur de 1 à 100, 100 vh moyen taille de l'écran. Votre code sera: 

    <ion-scroll style="height:100vh;">

    ou si height ne fonctionne pas, alors 

    <ion-scroll style="max-height:100vh;">

    Utile lien sur style avec vh.

    Salut, j'ai essayé votre solution mais il n'a pas aidé. Quand je fixe la hauteur en petit appareil, je vois encore le contenu des petits sur les grands de l'appareil.
    vous avez besoin de donner le pourcentage de la hauteur de items à l'intérieur de scoll vue. Par exemple 20vh pour chaque élément.
    Supposons que j'utilise 100vh sur un petit appareil, et couvre l'ensemble de la sceen, le même 100vh ne couvre pas tout l'écran sur grand appareil. Donc, je ne pense pas que cela va résoudre le problème
    je pense que vous n'avez pas allés dans le document que j'ai mentionnés. vh unité est utilisée pour mesurer avec une taille totale de l'écran. 100vh signifie que 100% de la hauteur totale de la hauteur de l'écran. Veuillez consulter à nouveau snook.ca/archives/html_and_css/vm-vh-unités
    Oui, j'ai fait de même, essayez maintenant le même code dans les grandes appareil et vous pourrez voir quelques places restantes au bas de la page, comme il l'habitude de couvrir l'ensemble de la page.

    OriginalL'auteur Mudasser Ajaz

  2. 0

    Ici ce que j'ai fait,
    dans votre barre de défilement, l'envelopper avec cette classe: modal-parent, modal-top, modal-scroll

    <ion-modal-view class="modal-parent">

  <ion-item class="modal-top">
    ...
  </ion-item>

  <ion-scroll class="modal-scroll" style="height:100px;width:100%;"...>
    ...
  </ion-scroll>

</ion-modal-view>

    en vous js définir cette fonction:

      function setScrollHeight(parent, top, scroll, index, offset){
    var parentH = document.getElementsByClassName(parent)[index].clientHeight;
    var topH = document.getElementsByClassName(top)    [index].clientHeight;
    var scrollH = document.getElementsByClassName(scroll)[index];

    scrollH.style.height = parentH - topH - offset + 'px';
  }

    et vous êtes prêt à aller en appelant à quelque chose comme ceci

    setScrollHeight('modal-parent', 'modal-top', 'modal-scroll',1 ,100);

    fondamentalement, modal-parent sera moins modal-top et le résultat sera mis modal-scrollhauteur de

    offset quelque chose comme rembourrage

    OriginalL'auteur Haziq