Move footer above keyboard when it appear on mobile devices

Question

I have found alot of artivles and posts here about how to hide footer when keyboard on mobile devices arise but not what I am trying to do which is opposite.

I want to move footer up above keyboard when keyboard is open.

HTML

<div class="wrapper">
<input type="text">
<div class="footer">Here Footer</div>
</div>

CSS

 .wrapper {
    position:relative;
    }
    .footer {
      width: 100%;
      background-color: #4c66a4;
      color: #fff;
      position: absolute;
      left: 0px;
      bottom: 0px;
      text-align: center;
    }

Any idea what am I doing wrong as it goes overflowed by keyboard all the time.

Answer 1

So it is not possible to stick div to the keyboard as keyboard on mobiles doesnt sit within viewport so. As i needed a numeric keyboard what I did is used jquery "KEY" functionality to make a keyboard based on divs.