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

最新推荐文章于 2024-06-20 10:18:00 发布

weixin_30716725

最新推荐文章于 2024-06-20 10:18:00 发布

阅读量670

点赞数

文章标签： javascript ViewUI

原文链接：http://www.cnblogs.com/yuanzhiguo/p/7340636.html

版权

在微信端时发现固定在底部的按钮在页面调用输入法的时候会被顶起来，多次测试发现只是在安卓上面，听说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设置一个初始化位置或者高度，

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

转载于:https://www.cnblogs.com/yuanzhiguo/p/7340636.html

weixin_30716725

关注

0
点赞
踩
1

收藏

觉得还不错? 一键收藏
0
评论
复制链接

分享到 QQ

分享到新浪微博

扫一扫