CSS 如何防止键盘上移内容？

Question

我正在使用 Ionic v5 创建一个简单的“注册”页面，我对 CSS 和一般样式还很陌生。我无法找到一种方法来防止键盘将我的内容向上移动（参见图片）

我的CSS:

.bottom-grid {
    position: absolute;
    left: 0;
    right: 0;
    width: 85%;
    bottom: 10px;
}

.form-grid {
    position: absolute;
    left: 0;
    right: 0;
    width: 85%;
}

从这里搜索一些帖子，我尝试将位置更改为固定，并添加：

ion-grid {
    min-height: 100%;
}

运气不好。如何将底部网格保留在页面底部？感谢您的帮助！

Answer 1

我的建议是使用ion-footer。

<ion-header>
  <ion-back-button>
  Register
  ...
</ion-header>

<ion-content [fullscreen]=true class='myMaxHeightClass'>
  ...enter form inputs here
</ion-content>

<ion-footer>
 <p>Already have an account?</p>
 <ion-button>Login</ion-button>
</ion-footer>

在 Css 文件上（以防 fullscreen=true 不起作用）：

.myMaxHeightClass {
    height: calc(100vh-150px)
 }

150px 是页脚的高度。

这应该会使内容全屏显示，您的页脚将保持在底部。

避免使用绝对定位的页脚按钮，根据我的经验，这会导致一团糟。

让我知道这是否适合你，如果不适合，我会尝试想出不同的方法

CSS 如何防止键盘上移内容？

CSS how to prevent keyboard from shifting content up?

css

keyboard

mobile

button

ionic-framework