问答博客资讯标签用户活动
logo极客观点logo项目管理logoHarmonyOS
开发者社区
javascript
前端
python
node.js
react
vue.js
php
laravel
go
人工智能
mysql
linux
ios
java
android
css
typescript
spring
程序员
logoONES 研发管理logo思否企业问答logo安谋科技 XPU

移动端布局，手机输入法会把footer顶上去

头像
AK47
    237115571

    如题
    图片如下：

    clipboard.png

    这个应该怎么解决？基于vue-cli的项目

    vue.jscsshtml5
    阅读 7.4k
    8 个回答
    得票最新
    头像
    toBeTheLight
      16.6k41634
      ✓ 已被采纳

      正常就该顶上去啊。你加个背景就行了。
      然后我看了其他几个网站的解决方案：

      1. 搜索的时候直接跳转到别的页面了（饿了么）。
      2. 隐藏（思否）但是有时候也会顶上来。
      3. 没有底部（美团）。
      头像
      gauseen
        1.3k39

        这是因为软键盘把视口的高度压缩了，可以在初始加载的时候，获取视口高度，并设置 body的高为视口高度，就可以了。

        头像
        fsme
          78121025
          头像
          ZHENGGEGE
            374

            底部footer的样式怎么写的？ 定位到下面会这样吗

            头像
            codedao
              1148

              时隔10天了...
              思路是高度发生变化时候，隐藏掉该导航栏
              footerbox ==> 底部导航

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

              希望有用...

              头像
              dodomonster
                2.1k51928

                兼容性问题？用自己项目测试，footer是fixed定位，测试机i7 safari和微信，一切正常~

                头像
                小邵爷
                  20516

                  各路大神显神通，正好我最近遇到了这个问题footer使用fixed布局，在部分安卓机型会出现这种情况，我监听了用户输input的状态，输入的时候让footer的position为static，在光标离开input的时候再设置回fixed。

                  <template>
    <!-其他代码省略-->
    <input class="search" @focus="focus" @blur="blur"/>
    <footer id='footers'></footer>
</template>
<script>
    <!-其他代码省略-->
    methods:{
        focus(e){
          //考虑到footer不一定和input在一个组件内，所以没有使用vue的$refs
          var footer=document.getElementById('footers')  
          footer.style.position='static'
        },
        blur (e) {
          var footer=document.getElementById('footers')
          footer.style.position='fixed'
        }
    }
</script>
                  头像
                  天是海的背影
                    7

                    使用 scrollIntoView API 保证当前的元素显示在窗口
                    <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>

                    撰写回答
                    你尚未登录，登录后可以
                    • 和开发者交流问题的细节
                    • 关注并接收问题和回答的更新提醒
                    • 参与内容的编辑和改进，让解决方法与时俱进
                    推荐问题