html - 如何解决我的键盘正在推动我的内容？

Question

我创建了一个 HTML 注册表单，它工作正常，但是当我尝试在移动设备中填写表单时，键盘正在向上推动表单。帮我解决这个问题。

.box {
  width: 300px;
  padding: 20px;
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  background: rgba(0, 0, 0, 0.3);
  text-align: center;
  border-radius: 20px 20px;
}

<form className="box">
  <h1>Log In</h1>
  <input type="email" name="" placeholder="Email" />
  <input type="password" name="" placeholder="Password" />
  <input type="submit" value="Login" />
  <a href="/">Forget Password?</a>
</form>