創建一個響應式網格，頁眉和頁腳

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，它裏面的所有東西都會隨着視圖一起滾動，因此在大屏幕上，網格看起來會變小，頁腳會上升。

試試這個

<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> 

這樣的footer'll永遠是你的頁面的底部無論你的視口。

希望這會有所幫助。