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行＆amp; col或更多。在小型移动设备中查看此网格时，它在屏幕中可见，但在选项卡上查看相同的网格会在底部显示空白屏幕。

我希望标题内容页脚在所有屏幕尺寸中均可见而不滚动。

Answer 1

问题是你在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>

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

希望这有帮助。

使用页眉和页脚创建响应式网格

1 个答案: