问题:输入框固定在页面的底部
在android中,如果页面没有滚动条,或者在有滚动条而滚动到最底部时,点击输入框,输入法闪退
andrrid设备:红米 android版本4.3JXS36C miui版本MIUI-4.8.6
在ios中,在页面用fixed固定定位的元素都会跑动,如下图
ios设备:iphone5 ,ios版本7.0.2
固定底部的输入框跑离输入法,固定头部的层被滚动到上面去
我在hello mui中把输入框定位底部,会有同样的问题。
代码:
<body>
<header class="detailpage_head">
<a class="back" onclick="closeview();"></a>
<h1 class="title">评论</h1>
</header>
<div>
<div id="con" class="main"></div>
<div id="comment" class="comment">
<div style="text-align: center;martin-top:20px">
<img width="60" height="60" src="../img/icon-load.gif" />
</div>
</div>
</div>
<div class="replay">
<textarea class='replaycon' id='repcon' name="repcon"
rows="1" cols="1">我要评论...</textarea>
<div class="btn_rep_div">
<input class="btn_rep" id="btn_reply" onclick="doreply()" value="" />
<!--<div class="btn_rep" id='btn_reply' onclick="doreply()"></div>-->
</div>
</div>
</body>
相关样式:
.detailpage_head {
position: fixed;
width:100%;
top: 0;
left: 0;
z-index: 10;
height: 54px;
padding-right: 10px;
padding-left: 10px;
padding-top: 7px;
padding-bottom: 7px;
background-color: #00897b;
border-bottom: 0;
-webkit-box-shadow: 0 0 1px rgba(0, 0, 0, .85);
box-shadow: 0 0 1px rgba(0, 0, 0, .85);
-webkit-backface-visibility: hidden;
backface-visibility: hidden;
}
/其它详细页头部返回按钮 高度54px/
.detailpage_head .back{
float: left;
display: inline-block;
width:40px;
height:40px;
background-image: url('../img/icon-back.png');
}
.detailpage_head .title{
z-index: -1;
position: absolute;
display: block;
width: 100%;
padding: 0;
margin: 0 -10px;
font-size: 24px;
font-weight: 500;
line-height: 44px;
color: #fff;
text-align: center;
white-space: nowrap;
}
.replay{
position: fixed;
bottom: 0px;
left: 0px;
width: 100%;
min-height :48px;
background-color: #00897b;
}
.replaycon{
min-height: 48px;
width:85%;
background-color: #00897b;
border-style: none;
color : #ccc;
line-height: 20px;
font-size:18px;
overflow-y: hidden;
text-align: left;
margin: 0;
border-radius: 0;
outline: 0;
line-height: 24px;
word-wrap: break-word;
overflow-x: hidden;
overflow-y: auto;
float:left;
}
.nullcolor{
color : #ccc;
}
.unnullcolor{
color : #fff;
}
.btn_rep_div{
position: absolute;
bottom: 0;
right: 0;
width:15%;
height:48px;
line-height:48px;
text-align: right;
}
.btn_rep{
border-style: none;
margin-top: 8px;
width:32px;
height:32px;
background-color: #00897b;
background-image: url('../img/icon-reply.png');
background-repeat: none;
margin-right:10px;
}