最近用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>
<
input
id=
"oldPwd"
type=
"password"
placeholder=
"输入旧密码"
></
p
>
<
p
class=
"new-pwd"
><
span></
span>
<
input
id=
"newPwd"
type=
"password"
placeholder=
"输入新密码，8-16位数字和字母组成"
></
p
>
<
p
class=
"confirm-pwd"
><
span></
span>
<
input
id=
"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'});
}
}
解决了此问题。监听窗口大小变化 窗口高度 小于 页面高度时 清除定位。