在ionic2 + bootstrap4中滚动时，粘性页脚与屏幕一起移动

Question

我正在使用带有引导程序的ionic2来制作PWA。我使用了“我的离子材料设计”主题。

我面临着实施粘页脚的问题。我曾尝试过使用引导程序代码，但问题是粘性页脚随屏幕移动。我如何始终将其修复在屏幕底部。任何人都可以帮助。

.footer {
     position: fixed;
     left: 0;
     bottom: 0;
     width: 100%;
     background-color: red;
     color: white;
     text-align: center;
  }

  <div class=" bar footer bar-footer">
    <p>Bootstrap Footer</p>
  </div>

我将此代码用于“我的离子材料设计”主题。但它并没有解决。问题是“粘性页脚”在滚动时随屏幕一起移动。

Answer 1

如果要使用页脚，则可以使用离子类中提供的ion-footer标签。 ion-content具有滚动功能，如果您为页脚应用样式，则页脚将不会处于固定位置。因此最好使用ion-footer

<ion-footer>
  <ion-toolbar>
    <ion-title>Footer</ion-title>
  </ion-toolbar>
</ion-footer>

请参阅离子文档Footer