手机浏览器软键盘收起后被顶起的页面不回落

在线Demo(在移动端打开查看效果)

在手机浏览器中，父元素使用绝对定位占满整个屏幕时，如果子元素的总高度不能触发滚动；收回软键盘时，被顶起的页面不会复原

index.tsx

import styles from './index.less';

export default function IndexPage() {
  return (
    <div className={styles.page}>
      <h3>标题1</h3>
      <h3>标题2</h3>
      <h3>标题3</h3>
      <h3>标题4</h3>
      <h3>标题5</h3>
      <input type="text" placeholder="请输入文本"/>
    </div>
  );
}

index.less

.page{
  position: absolute;
  top: 0;
  right: 0;
  bottom: 0;
  left: 0;
  overflow-y: auto;
  background-color: #ededed;
}

input{
  margin: 0 auto;
  margin-top: 300px;
  display: block;
  line-height: 1.5em;
}

错误示例：

修改 index.less 将 bottom 改为 -0.1px

.page{
  position: absolute;
  top: 0;
  right: 0;
  bottom: -0.1px;
  left: 0;
  overflow-y: auto;
  background-color: #ededed;
}

input{
  margin: 0 auto;
  margin-top: 300px;
  display: block;
  line-height: 1.5em;
}

正确示例：