In mobile browsers, when the parent element fills the screen with absolute positioning, if the total height of the child element does not trigger scrolling; When the soft keyboard is retracted, the jacked page will not be restored

index.tsx

import styles from './index.less';

export default function IndexPage() {
  return (
    <div className={styles.page}>
      <h3>Title 1</h3>
      <h3>Title 2</h3>
      <h3>Title 3</h3>
      <h3>The title 4</h3>
      <h3>Title 5</h3>
      <input type="text" placeholder="Please enter text"/>
    </div>
  );
}
Copy the code

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; The line - height: 1.5 em. }Copy the code

Examples of errors:

Change the bottom to -0.1px

.page{ position: absolute; top: 0; right: 0; Bottom: 0.1 px; left: 0; overflow-y: auto; background-color: #ededed; } input{ margin: 0 auto; margin-top: 300px; display: block; The line - height: 1.5 em. }Copy the code

Correct examples: