Ionic - Come impostare l'altezza <Ion-scroll> in modo che si adatti automaticamente a tutti i dispositivi di risoluzione?

Question

Il mio codice è il seguente:

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

ho una visione di scorrimento di height = 200px, questo sembra ok su dispositivi di piccole dimensioni, ma quando ho vista questo su dispositivo di grandi dimensioni, il contenuto appare troppo piccolo perché l'altezza è '200px' che è relativamente piccolo. Quindi, qual è il metodo corretto per risolvere questo? Ho provato a usare l'altezza in percentuale, ma non è stato risolto. Per favore, aiuto e mi dispiace per il mio pessimo inglese.

Answer 1

Utilizzare vh anziché px. È possibile impostare il valore vh da 1 a 100, 100 vh significa dimensioni schermo intero. Il tuo codice sarà:

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

o se height non funziona allora

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

Utile link circa styling con vh.

Answer 2

Ecco che cosa ho fatto, nel vostro rotolo, avvolgerla con questa 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> 

in voi js definire questa funzione:

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'; 
    } 

e siete pronto per andare chiamando qualcosa di simile

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

fondamentalmente, modal-parent sarà meno modal-top e il risultato sarà impostato modal-scroll s' altezza

offset qualcosa come imbottitura