input textbox hidden behind keyboard on android Chrome

Question

I have a mobile web page of the following format:

header - logo etc - absolute positioned

content - scrollable, absolute positioned

footer, 40px abs

Answer 1

Changing from absolute positioning to fixed positioning should fix the issue. Absolute positions the element with respect to the initial page-size during page load (adding a keyboard shrinks the visible page). Fixed positions the element with respect to the current page-size, keeping the element above the keyboard.

#myElement {
  position: fixed;
  bottom: 2em;
}