创建带有页眉和页脚的响应式网格

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行或更多列。 在小型移动设备中查看此网格时，其在屏幕上可见，但在选项卡上查看该网格将在底部显示空白屏幕。

我希望页眉内容页脚在所有屏幕尺寸中均可见，而无需滚动。

Answer 1

问题是您要在ion-content添加一个ion-footer ，其中的所有ion-content都会随着视图滚动，因此在大屏幕中，网格会显得更小，页脚会上升。

尝试这个

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

这样，无论您的视口如何，页脚都将始终位于页面底部。

希望这可以帮助。