移動(dòng)端布局，手機(jī)輸入法會(huì)把footer頂上去

如題
圖片如下：

這個(gè)應(yīng)該怎么解決？基于vue-cli的項(xiàng)目

回答

編輯回答

空痕

你可以獲取視口的高度，底部的定位基于top定位而不是基于bottom,這樣可以解決這個(gè)問題
https://www.jianshu.com/p/eee...

2018年4月4日 13:51

編輯回答

小曖昧

使用 scrollIntoView API 保證當(dāng)前的元素顯示在窗口
<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>

2017年8月19日 20:36

編輯回答

別瞎鬧

兼容性問題？用自己項(xiàng)目測(cè)試，footer是fixed定位，測(cè)試機(jī)i7 safari和微信，一切正常~

2018年8月27日 20:40

編輯回答

懶洋洋

各路大神顯神通，正好我最近遇到了這個(gè)問題footer使用fixed布局，在部分安卓機(jī)型會(huì)出現(xiàn)這種情況，我監(jiān)聽了用戶輸input的狀態(tài)，輸入的時(shí)候讓footer的position為static，在光標(biāo)離開input的時(shí)候再設(shè)置回fixed。

<template>
    <!-其他代碼省略-->
    <input class="search" @focus="focus" @blur="blur"/>
    <footer id='footers'></footer>
</template>
<script>
    <!-其他代碼省略-->
    methods:{
        focus(e){
          //考慮到footer不一定和input在一個(gè)組件內(nèi)，所以沒有使用vue的$refs
          var footer=document.getElementById('footers')  
          footer.style.position='static'
        },
        blur (e) {
          var footer=document.getElementById('footers')
          footer.style.position='fixed'
        }
    }
</script>

2018年2月19日 00:04

編輯回答

兮顏

底部footer的樣式怎么寫的？定位到下面會(huì)這樣嗎

2018年2月5日 03:57

編輯回答

笨尐豬

時(shí)隔10天了...
思路是高度發(fā)生變化時(shí)候，隱藏掉該導(dǎo)航欄
footerbox ==> 底部導(dǎo)航

$(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"});
        }
    });
});

希望有用...

2017年10月25日 09:13

編輯回答