最近用html做app时，在修改密码页面弹出的软键盘将固定在页面底部的按钮顶上来了，导致布局有一定的混乱。我查阅了相关资料解决此问题。这里做一个记录。
原因：某些安卓机下键盘弹起会引起窗口高度（html标签的高度）变小，而fixed定位是相对于html根元素的，所以会被顶上来。如下图：
html如下：
<body>
<div class="container has-nav has-bottom">
<div class="pwd-bg"></div>
<div class="pwd-box">
<form>
<p class="old-pwd"><span></span><inputid="oldPwd"type="password"placeholder="输入旧密码"></p>
<p class="new-pwd"><span></span><inputid="newPwd"type="password"placeholder="输入新密码，8-16位数字和字母组成"></p>
<p class="confirm-pwd"><span></span><inputid="confirmPwd"type="password"placeholder="确认新密码"></p>
</form>
</div>
</div>
<footer class="footer">
<a href="javascript:;" id="js-confirm" class="footer-button confirm">确认</a>
<a href="javascript:;" id="js-cancle" class="footer-button close">取消</a>
</footer>
</body>
解决办法：
1、
$('input').on('click',function( ){
$('.footer').css({'position':'static'})
});
$('input').on('blur',function( ){
$('.footer').css({'position':'fixed'})
});
存在的问题：当输入第三个input框时，会复现上图的情况。
2、
window.onresize= function(e){
if(window.innerHeight< $('body').height()){
$('.footer').css({'position':'static'});
}else{
$('.footer').css({'position':'fixed'});
}
}解决了此问题。监听窗口大小变化 窗口高度 小于 页面高度时 清除定位。
1万+
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
