this is because the soft keyboard compresses the height of the viewport. When it is initially loaded, you can get the height of the viewport and set the height of the body to the height of the viewport.

if you are normal, you should go up. All you have to do is add a background.
then I looked at the solutions of several other websites:

1. when searching, you jump directly to another page (ele.me).
2. hide (think no) but sometimes it comes up.
3. has no bottom (Meituan).

you can get the height of the viewport, and the positioning at the bottom is based on top positioning rather than bottom,. This can solve this problem
https://www.jianshu.com/p/eee.

what is the style of the bottom footer? Will this happen if you navigate to the following

it's been 10 days.
when the height changes, hide the navigation bar
footerbox = = > bottom navigation

$(function(){
    var mHeight = $(document).height();
    $(window).resize(function () {
        if($(document).height() < mHeight){
            $("-sharpfooterbox").css({"position":"static","display":"none"});
        }else{
            $("-sharpfooterbox").css({"position":"absolute","display":"block"});
        }
    });
});

I hope it works.

compatibility issues? Test with your own project, footer is fixed positioning, test machines i7 safari and Wechat, everything is normal ~ / p >

all kinds of gods show their magical powers, just as I have recently encountered this problem. Footer uses fixed layout. This happens on some Android models. I monitored the status of users typing input, and asked the position of footer to set static, to fixed when the cursor left the input.

<template>
    <!--->
    <input class="search" @focus="focus" @blur="blur"/>
    <footer id='footers'></footer>
</template>
<script>
    <!--->
    methods:{
        focus(e){
          //footerinputvue$refs
          var footer=document.getElementById('footers')  
          footer.style.position='static'
        },
        blur (e) {
          var footer=document.getElementById('footers')
          footer.style.position='fixed'
        }
    }
</script>

use scrollIntoView API to ensure that the current element is displayed in the window
< body >

<div class="chunk"></div>
<div class="btn-top">up</div>
<div class="btn-bottom">down</div>
<script>
    const up = document.querySelector('.btn-top');
    const down = document.querySelector('.btn-bottom');
    const test = document.querySelector('.chunk');
    up.addEventListener('click', function() {
      test.scrollIntoView(true);
    });
    down.addEventListener('click', function() {
      test.scrollIntoView(false);
    });
</script>

< / body >