标题:webapp页面中底部版权bottom或者footer在调出输入法的时候上窜遮挡其他元素的问题解决方案,输入法跳出时底部bottom遮挡问题
通过css即可解决问题。
范例代码:
webapp页面中底部版权bottom或者footer在调出输入法的时候上窜遮挡其他元素的问题解决方案,输入法跳出时底部bottom遮挡问题<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width; initial-scale=1.0; maximum-scale=1.0; user-scalable=0;" />
<meta name="apple-mobile-web-app-capable" content="yes" />
<meta name="apple-mobile-web-app-status-bar-style" content="black" />
<style type="text/css">
* {
margin: 0px;
padding: 0px;
font-family: microsoft yahei;
}
html {
height: 100%;
}
body {
position: relative;
min-height: 100%;
}
.head1 {
padding: 10px 0px;
text-align: center;
color: #fff;
background: #F08519;
font-size: 24px;
}
.center .biaoti2 {
padding: 10px 0px;
font-size: 16px;
text-align: center;
}
.center .searchArea {
text-align: center;
}
.searchArea {
border: 1px solid red;
padding-bottom: 100px;
}
input#fwm {
-webkit-appearance: none;
padding: 5px;
width: 60%;
max-width: 250px;
height: 27px;
font-size: 18px;
border: 1px solid #AAA;
margin-top: 20px;
}
input#tijiao {
height: 40px;
font-size: 18px;
border: none;
border-radius: 2px;
background-color: #f08519;
color: #fff;
width: 24%;
margin-top: 20px;
max-width: 150px;
text-align: center;
-webkit-appearance: none;
}
.bottom {
position: absolute;
text-align: center;
width: 100%;
bottom: 10px;
}
</style>
<title>测试</title>
</head>
<body>
<div class="head1">测试测试</div>
<div class="center">
<div class="biaoti2">请输入内容
</div>
<div class="searchArea">
<input type="text" name="fwm" id="fwm" placeholder="输入内容" maxlength="16">
</div>
</div>
<div class="bottom">
<input type="button" value="提交" id="tijiao">
</div>
</body>
</html>