Mobile side about the keyboard will input box on top of the solution---personal insights

On the mobile side, it is often encountered when input gets the focus when the virtual keyboard pops up the overall page layout to disrupt the situation. For example, this

When the input box does not get the focus keyboard not lifted:

The input box gets the focus when the keyboard lifts up

In this case, whether it is the above textarea or the following input box, any one of them to get the focus, the phone's virtual keyboard will be lifted to the lowest end of the screen fixed positioning "submit" button top to the screen "middle" position, seriously affect the layout, This is the test staff to see is an unforgivable, has been enough to have been expelled from the bottom, how to solve this problem? For a "submit" page where the layout is not very complex, you can dynamically get the offset () of the bottom footer. Top and subtract its parent element offset (). Top, which treats its difference as the Margin-top value of footer, Remove the fixed property of footer at the same time.

The specific resolution steps are as follows:

1. Wrap the footer outside a parent div, assign its class name Footer-wrap,footer fixed absolute positioning with the bottom of the screen
2. Get the offset () of footer and Footer-wrap, respectively. Top, calculate the difference, remove the fixed property of footer, and assign the value to footer Margin-top

After the keyboard is lifted, the page looks like this:

Then, this problem is solved, of course, this is a very simple layout of the page, can do a perfect solution does not leave the bug, but for more complex pages can also be perfect fit, still unknown, hope you forgive, until met this problem, I add. 、

Mobile side about the keyboard will input box on top of the solution---personal insights