底部菜单被输入法顶上去的解决方案

遇到几次这种问题了,之前一直没写处理方法,导致每次遇见都要花很多时间找解决方案。
只有android系统会出现这个问题,为了以后能够快速解决问题,还是记录一下吧。

底部菜单被输入法顶上去的解决方案

一、最开始页面结构是酱紫的,如图:
《底部菜单被输入法顶上去的解决方案》

二、展示下问题
《底部菜单被输入法顶上去的解决方案》

三、解决后
《底部菜单被输入法顶上去的解决方案》

来说说解决方案吧:
.login_footer {

width: 7.5rem;
height: .9rem;
line-height: .9rem;
display: -webkit-box;
display: -ms-box;
display: -moz-box;
display: -o-box;
box-align: center;
-webkit-box-align: center;
-moz-box-align: center;
-ms-box-align: center;
                      
 position: absolute;  /*这个一定要写*/

}

.login_footer > div {

text-align: center;
display: block;
box-flex: 1;
-webkit-box-flex: 1;
-moz-box-flex: 1;
-ms-box-flex: 1;
-o-box-flex: 1;
bottom: 0;

}

<div class="login_footer" id="login_footer">
    <div><a href="#"> 招商加盟</a></div>
    <div onclick="Show()">
        联系客服
    </div>
</div>

$(function () {
    var oHeight = $(document).height(); //浏览器当前的高度

    $(window).resize(function () {

        if ($(document).height() < oHeight) {

            $("#login_footer").css({ "position": "static","display":"none" });
        } else {
            //下面加的样式根据具体情况添加
            //若 login_footer 里面只有一个div 是不需要加div左右浮动的
            $("#login_footer").css({ "position": "absolute", "display": "block", });
            $('#login_footer div').css({ "width": "50%", "display": "inline-block",  "height": ".9rem" })
            $('#login_footer div:nth-child(1)').css({ "float": "left"})
            $('#login_footer div:nth-child(2)').css({ "float": "right" })
        }

    });
});

    原文作者:芥茉_程序媛
    原文地址: https://segmentfault.com/a/1190000011949255
    本文转自网络文章,转载此文章仅为分享知识,如有侵权,请联系博主进行删除。
点赞