Sticky footer on mobile screen
In my web application, I have a sticky footer for small screens. The problem is the sticky footer jumps up and down depending on the state of the keyboard.
I'm looking for this to be overlaid by a mobile keyboard. Here is the css for the sticky footer
width: 100%;
position: fixed;
bottom: 0;
height: 85px;
left: 0;
right: 0;
Any workarounds for this?
source to share
It is best to use something other than fixed for smaller screens / touchscreens as you will have to account for a number of different issues. This problem with the keyboard is one, turning the device into viewport: landscape
another. This can also cause a scrolling problem, as touch devices don't display certain things until the scrolling is complete (which means that elements can react differently depending on how quickly the user pushes their finger to scroll). It is better to make a site that is reliable most of the time, rather than counting and considering every possible circumstance.
Even for "desktop" devices, if you can do something without fixed positioning, do it. In these cases, using fixed positioning is more of a shortcut than best practice.
There are several ways to create a sticky footer without using fixed positioning, and this will help optimize your site for the best viewing experience on most devices. If you are using a sticky footer, you will find many great options. Some of them are below.
source to share