html5软键盘布局,移动端布局/软键盘弹出问题

我们会遇到这样的页面。

image.png

诸多list列表项。最低端是固定的菜单选项div。

接下来的动作是，点击其中一个选项，弹出一个占满全屏的modal

image.png

这个modal里有header，footer，和你想要编辑的东西

这段话你们可以不看。我在项目中遇到的问题是，占满全屏的modal会随着body第一层滚动(随长长的list滚动)

image.png

那如果我将第二层modal给fixed定位，肯定就不滚了。but，用了fixed，当你的modal中有输入框时：

软键盘弹出，你的输入框死死的在那里纹丝不动，如果是偏页面下面的输入框，那就被盖住了。用户看不到自己输的什么，心塞

用了很多js+css的方法改来改去还要考虑兼容，浏览器。。，恶心到了自己。

好了，请看。

做了一个布局demo，可以完全很舒畅

content="width=device-width, user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0">

Document

.con .main .item{

background: pink;

margin-bottom: 10px;

width:100%;

height:200px;

font-weight: 900;

text-align: center;

padding-top: 20px;

}

.con .main{

position: absolute;

bottom: 50px;

width: 100%;

height: 100%;

background: #eee;

overflow: hidden;

}

.con .footer{

width:100%;

height:50px;

background: green;

position: fixed;

bottom:0;

}

.modal.in{

display: block;

}

.modal{

display: none;

position: absolute;

top:0;

bottom:0;

width:100%;

background: #fff;

}

.con .main .main_itemCon{

overflow: auto;

height: 100%;

}

.modal-item .main h1{

height:100px;

background: #eee;

margin-bottom: 10px;

}

.modal-item .header{

height:40px;

}

.modal-item .footer{

height:50px;

position: fixed;

bottom:0;

width:100%;

}

.modal-item .main{

position: absolute;

width: 100%;

top: 40px;

bottom: 40px;

overflow: hidden;

}

.modal-item .main .main_item{

height: 100%;

overflow: auto;

}

h1

1

2

3

4

5

6

7

菜单选项

header

我是内容

1111

222

333

444

555

提交

$('.con .main .item').click(function () {

console.log('pp');

$('.modal').addClass('in');

});

嗯，直接粘过去看demo吧，废话不多说。聪明的你一定了解了。