js手机键盘遮挡_移动端页面input输入框被键盘遮挡问题

提交

v

header, footer, main {

display: block;

}

header {

position: fixed;

height: 50px;

left:;

right:;

top:;

}

footer {

position: fixed;

height: 34px;

left:;

right:;

bottom:;

}

main {

margin-top: 50px;

margin-bottom: 34px;

height: 2000px

}

下面这个样子。

键盘唤起下面这样

是为什么呢？：  软键盘唤起后，页面的 fixed 元素将失效(即无法浮动，也可理解为成了 absolute 定位)

解决方案: 将原 body 滚动的区域域移到 main 内部

header, footer, main {

display: block;

}

header {

position: fixed;

height: 50px;

left:;

right:;

top:;

}

footer