css - 键盘将 div 向上推出屏幕

Question

我正在使用 Ionic 3 制作一个网站，该网站将成为 webview 中另一个 native 应用程序的一部分，因此我不使用 cordova 或任何 native 插件。我有一个在元素上方带有嵌入式 Google map View 的表单，这是我的 HTML:

<div  style="height: 40%; width: 100%">
  <div id="map_loader" *ngIf="showMapLoader">
    <div class="sk-wave">
      <div class="sk-rect sk-rect1"></div>
      <div class="sk-rect sk-rect2"></div>
      <div class="sk-rect sk-rect3"></div>
      <div class="sk-rect sk-rect4"></div>
      <div class="sk-rect sk-rect5"></div>
    </div>
  </div>
  <div #mapCanvas style="width: 100%; height: 100%;"></div>
</div>
<form (ngSubmit)="submit()" padding>
  <ion-list>
......
......
.....
  </ion-list>
</form>

这是我的 CSS :

  #map_loader {
    margin:auto;
    background-color: rgba(0, 0, 0, 0.5);
    width: 100%;
    height: 100%;
    z-index: 1000;
    position: absolute;
  }

  .scroll-content {
    top: 38%;
    position: absolute;
    margin-top: 32px;
  }

现在，一旦用户在他的手机上打开网站并开始填写表格，键盘就会将 map 移出屏幕(向上)并保持原样，表格下方会显示一个空白区域。

我做的对吗？这是因为我的 CSS 造成的吗？使 div 占据屏幕高度的特定百分比的最佳方法是什么？我尝试了 ion-grid 但它似乎无法帮助我解决这个问题。

Answer 1

这是 ionic 中的错误，一旦你专注于任何输入，键盘就会出现，并会为 scroll-content 类添加 padding-bottom 以提升上面的 for关闭键盘后，它不会删除 padding-bottom。我试图检查移动键盘上是否有任何 JS 事件，但我们没有，所以我的解决方法是为 scroll-content 设置固定的 padding-bottom类以防止在运行时更改它。

.scroll-content {
    padding-bottom: 0 !important;
 }