移动端底部被输入法顶起的解决办法

在微信端时发现固定在底部的按钮在页面调用输入法的时候会被顶起来，多次测试发现只是在安卓上面，听说ios有时也会，不过没遇见，最后采用的方法是不给底部设定固定绝对定位，直接采用计算clientHeight来确定底部的位置，简单来说就是把底部撑到固定的位置，

下面是HTML

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <style>
        *{
            padding: 0;
            margin: 0;
        }
        html,body{
            height: 100%;
        }
        #wrap{
            height: 100%;
        }
        .main{
            overflow-y: scroll;
        }

    </style>
</head>
<body>
<div id="wrap">
<div class="main">
    <input type="text">
    <div>hahha</div>
    <div>hahha</div>
    <div>hahha</div>
    <div>hahha</div>
    <div>hahha</div>
    <div>hahha</div>
    <div>hahha</div>
    <div>hahha</div>
    <div>hahha</div>
    <div>hahha</div>
    <div>hahha</div>
    <div>hahha</div>
    <div>hahha</div>
    <div>hahha</div>
    <div>hahha</div>
    <div>hahha</div>
    <div>hahha</div>
    <div>hahha</div>
    <div>hahha</div>
    <div>hahha</div>
    <div>hahha</div>
    <div>hahha</div>
    <div>hahha</div>
    <div>hahha</div>
    <div>hahha</div>
    <div>hahha</div>
    <div>hahha</div>
    <div>hahha</div>
    <div>hahha</div>
    <div>hahha</div>
    <div>hahha</div>
    <div>hahha</div>
    <div>hahha</div>
    <div>hahha</div>

</div>
<div class="footer" style="height: 36px;background-color: red;">
   <button>这是按钮</button>
</div>
</div>
<script src="../../js/jq/jquery.js"></script>
</body>
</html>

　　很重要的一点就是要给html、body设置height:100%;主要是撑开高度，

下面是js

     $(window).resize(function(){
         var height=document.body.clientHeight-36+"px";
         $(".main").css("height",height)
     });

为了效果好，必要给底部或者main设置一个初始化位置或者高度，

以上实现很简单，我感觉主要是思维的转换。

posted @ 2017-08-10 17:57  ABC袁  阅读(886)  评论(0)  编辑  收藏  举报