html - Ionic - 固定 div 在 ion-content 内滚动

Question

GoogleChrome 更新后，固定 div 随页面滚动。

样本:LINK

在这种情况下，MAP 是 ion-content 中的一个 fixed div。

如果我在 ion-content 中放置一个像下面这样的简单 div，它不会保持固定，但如果我移到 ion-content 之外，它就会固定!

<div style="width: 100px;height: 100px;position: fixed; left: 0; bottom: 0px; z-index: 500; background-color: blue;"></div>

如何让它固定在 ion-content 中？

谢谢你的帮助!

我正在使用 Ionic 3(3.20.0)

Answer 1

您应该在页眉或页脚中使用 ion-toolbar。像这样的东西(我在 stackbliz 中试过):

<ion-header>
  <ion-toolbar>
    <ion-title>My Toolbar Title</ion-title>
  </ion-toolbar>
</ion-header>

<ion-content padding>
  <h2>Welcome to Ionic!</h2>
  <p>
    This starter project comes with simple tabs-based layout for apps
    that are going to primarily use a Tabbed UI.
  </p>
  <p>
    Take a look at the <code>pages/</code> directory to add or change tabs,
    update any existing page or create new pages.
  </p>

  <p>
    Take a look at the <code>pages/</code> directory to add or change tabs,
    update any existing page or create new pages.
  </p>
  <p>
    Take a look at the <code>pages/</code> directory to add or change tabs,
    update any existing page or create new pages.
  </p>
  <p>
    Take a look at the <code>pages/</code> directory to add or change tabs,
    update any existing page or create new pages.
  </p>
  <p>
    Take a look at the <code>pages/</code> directory to add or change tabs,
    update any existing page or create new pages.
  </p>
  <p>
    Take a look at the <code>pages/</code> directory to add or change tabs,
    update any existing page or create new pages.
  </p>
  <p>
    Take a look at the <code>pages/</code> directory to add or change tabs,
    update any existing page or create new pages.
  </p>
  <p>
    Take a look at the <code>pages/</code> directory to add or change tabs,
    update any existing page or create new pages.
  </p>
  <p>
    Take a look at the <code>pages/</code> directory to add or change tabs,
    update any existing page or create new pages.
  </p>
  <p>
    Take a look at the <code>pages/</code> directory to add or change tabs,
    update any existing page or create new pages.
  </p>
  <p>
    Take a look at the <code>pages/</code> directory to add or change tabs,
    update any existing page or create new pages.
  </p>
  <p>
    Take a look at the <code>pages/</code> directory to add or change tabs,
    update any existing page or create new pages.
  </p>
  <p>
    Take a look at the <code>pages/</code> directory to add or change tabs,
    update any existing page or create new pages.
  </p>
  <p>
    Take a look at the <code>pages/</code> directory to add or change tabs,
    update any existing page or create new pages.
  </p>
  <p>
    Take a look at the <code>pages/</code> directory to add or change tabs,
    update any existing page or create new pages.
  </p>
  <p>
    Take a look at the <code>pages/</code> directory to add or change tabs,
    update any existing page or create new pages.
  </p>

</ion-content>

<ion-footer no-border>

  <ion-toolbar>
    <ion-title>I'm a footer</ion-title>
  </ion-toolbar>

</ion-footer>