ヘッダーとフッターでレスポンスグリッドを作成する

Question

ヘッダーとフッターの中にグリッドが配置されています。このグリッドは、通常、小さな画面で表示されます。

<ion-header> 
     <img src="assets/img/main-logo.png" alt=""/> 
</ion-header> 

<ion-content class="has-header" > 
      <ion-grid style="padding:0;" > 
       <ion-row style="padding:0;"> 
        <ion-col> 
        <img src="img.png"> 
        </ion-col> 
        <ion-col> 
        <img src="img.png"> 
        </ion-col> 
        <ion-col> 
        <img src="img.png"> 
        </ion-col> 
        <ion-col> 
        <img src="img.png"> 
        </ion-col> 
       </ion-row> 
      </ion-grid> 
    </ion-content> 

<ion-footer> 
      footer Bar will be here 
</ion-footer> 

私は4行& col以上を持っています。小さなモバイルのこのグリッドを画面内で見ると、タブ内で同じグリッドを表示すると、画面の下部に空白の画面が表示されます。

スクロールせずにすべての画面サイズでヘッダーコンテンツフッターが表示されるようにします。

Answer 1

問題は、あなたのion-content内部ion-footerを追加しているということです、それは内部のすべてのものは、このようにグリッドがフッタが上がる小さく表示されます大画面で、ビューでスクロールします。

はfooter'llは関係なく、常にあなたのページの下部にあなたのビューポート上にあるこの

<ion-content class="has-header" > 
    <ion-grid no-padding> <!-- TRY NOT TO USE INLINE CSS, IT'S BAD. IN THIS CASE USE IONIC no-padding CSS UTILITY --> 
    <ion-row no-padding> 
     <ion-col> 
     <img src="img.png"> 
     </ion-col> 
     <ion-col> 
     <img src="img.png"> 
     </ion-col> 
     <ion-col> 
     <img src="img.png"> 
     </ion-col> 
     <ion-col> 
     <img src="img.png"> 
     </ion-col> 
    </ion-row> 
    </ion-grid> 
</ion-content> 
<ion-footer> 
    <!-- footer Bar will be here --> 
</ion-footer> 

この方法を試してみてください。

これが役に立ちます。