键盘向上推动一个 div &走出屏幕

问题描述

我正在使用 Ionic 3 创建一个网站，该网站将成为 web 视图中另一个本机应用程序的一部分，因此我不使用 cordova 或任何本机插件.我有一个在元素上方嵌入 Google 地图视图的表单，这是我的 HTML:

这是我的 CSS:

 #map_loader {边距:自动；背景颜色:rgba(0, 0, 0, 0.5);宽度:100%；高度:100%；z 指数:1000；位置:绝对；}.滚动内容{最高:38%；位置:绝对；边距顶部:32px；}

现在，一旦用户在手机上打开网站并开始填写表单，键盘就会将地图移出屏幕 ( Up ) 并保持这种状态，并且在表单下方显示一个空白区域.

我做得对吗?这是因为我的 CSS 造成的吗?让 div 占据屏幕高度的特定百分比的最佳方法是什么?我试过 ion-grid 但它似乎无法帮助我解决这种情况.

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

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

I'm using Ionic 3 to make a website which will be part of another native app in a webview so I don't user cordova or any native plugins. I have a form with an embedded Google Map View above the elements and here is my 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>

and here is my 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;
  }

Now once the user open the website on his phone and start filling the form the keyboard shifts the map out of the screen ( Up ) and it stays that way and a blank empty space shows bellow the form.

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