How to make footer rise above the mobile keyboard when focusing on text fields

Question

I need some help with footer placement for mobile devices in a web page. Currently, I have a fixed footer at the bottom of the HTML page. However, when I try to focus on an input box in mobile, the keyboard opens and the footer gets hidden under the keyboard. How do I make sure that the footer always gets placed above the keyboard and not under it? Here is the CSS I currently have.

.footer {
    position: fixed;
    right: 0;
    bottom: 0;
    left: 0;
    z-index: 999;
    white-space: nowrap;
    width: 100%;
    color: black;
    background-color: white;
    border-top: 2px solid green;
    padding-top: 6px;
    padding-bottom: 6px;
    padding-right: 5px;
    height: 20px;
    overflow-x: scroll;
    overflow-y: hidden;
}

<!--Footer needs to be over the keyboard in mobile devices when the input gains focus-->
<input type="text" placeholder="Footer over Keyboard">

<div class="footer">
  <button>Button 1</button>
  <button>Button 2</button>
  <button>Button 3</button>
</div>

NOTE(EDIT): How to prevent mobile keyboard from rising footer over the text fields? is not my question. That question is the exact opposite of my question and provides no answers or insight into how my problem can be solved.

Possible duplicate of [How to prevent mobile keyboard from rising footer over the text fields?](https://stackoverflow.com/questions/22627646/how-to-prevent-mobile-keyboard-from-rising-footer-over-the-text-fields) — Danny Buonocore, Oct 08 '18 at 21:40
@DannyBuonocore correct me if im wrong, but thats the exact opposite of what I asked, isn't it? — Yang K, Oct 08 '18 at 21:41

score 0 · Answer 1 · answered Oct 08 '18 at 22:06

0

Instead of using position: fixed, try using position: absolute instead. There are a number of issues in mobile browsers when using fixed positioning.

answered Oct 08 '18 at 22:06

brianespinosa

2,408
12
22

Keith · Answer 2 · 2018-10-08T23:23:37.820

I normally use CSS grids for layout nowadays, it's well supported and doing header footer layouts is nice and simple. You could also do this without CSS grids, the main thing to remember is make your website a 100% height based content, doing this will then squish the content and in doing so move the footer up.

If you run the below snippet on your browser, the keyboard should push up the footer,.. Tested on my Android phone and works anyway..

ps. Remember to click on Full page link to test.

Also because we have now made a 100% height page, you may also want to set overflow: auto on your content div / container so you can still scroll the website contents.

body {
 padding: 0;
 margin: 0;
 box-sizing: border-box;
 display: grid;
 position: absolute;
 top: 0;
 bottom: 0;
 width: 100%;
 grid-template-rows: 1fr min-content;
}

<div>
  This is some content.
  <input/>
</div>
<div>
  This is the footer
</div>

How to make footer rise above the mobile keyboard when focusing on text fields

2 Answers2