How to stick an element to the bottom when the virtual keyboard appears
css
A way of keeping the keyboard at the bottom of the page when the virtual keyboard appears on mobile you can use:
.nav {
bottom: max(0px, env(keyboard-inset-height, 0) - 100px);
}
You can see here the original post with that idea and here is the CodePen.
I learnt this from @shadeed9