移动端底部被输入法顶起的解决办法
Posted ABC袁
tags:
篇首语：本文由小常识网(cha138.com)小编为大家整理，主要介绍了移动端底部被输入法顶起的解决办法相关的知识，希望对你有一定的参考价值。
在微信端时发现固定在底部的按钮在页面调用输入法的时候会被顶起来，多次测试发现只是在安卓上面，听说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设置一个初始化位置或者高度，
以上实现很简单，我感觉主要是思维的转换。
以上是关于移动端底部被输入法顶起的解决办法的主要内容，如果未能解决你的问题，请参考以下文章