<style type="text/css">
body,
div,
p,
img,
span ,li,ul{
margin: 0;
padding: 0;
font-family: "微软雅黑";
}
img {
border: none;
}
ul,
li {
list-style: none;
}
.xlhn_content {
width: 960px;
height: 1000px;
margin: 0 auto;
background: url("${base}/resources/image/hunan_gyact/cytx_bg_pc.png") no-repeat;
background-repeat: no-repeat;
background-position: center;
background-size: cover;
overflow: hidden;
}
::-webkit-input-placeholder { /* WebKit browsers */
font-size:25px;
}
:-moz-placeholder { /* Mozilla Firefox 4 to 18 */
font-size:25px;
}
::-moz-placeholder { /* Mozilla Firefox 19+ */
font-size:25px;
}
:-ms-input-placeholder { /* Internet Explorer 10+ */
font-size:25px;
}
.xontent-mid{
text-align: center;padding-top:40%;font-size: 30px;
}
.xontent-mid input {
width: 50%;height: 5%;border-radius: 10px;outline: none;border: none;padding-left:30px ;
font-size: 25px;;
}
#yidcard{
margin-top: 30px;
}
.xontent-mid label{
margin-right: 20px;
}
.xontent-bottm{
margin-top: 30%;text-align: center;
}
.xl_joigz{
background: url("${base}/resources/image/hunan_gyact/guanzhu.png") no-repeat;
display: inline-block;width: 250px;height: 65px;
background-position: center;background-size: contain;
}
.xl_joinin{
background: url("${base}/resources/image/hunan_gyact/tj.png") no-repeat;
display: inline-block;width: 250px;height: 65px;
background-position: center;background-size: contain;
}
@media only screen and (min-device-width: 240px) and (max-device-width: 760px) {
html,body{
width: 100%;height: 650px;
}
.modal{
width:60%;margin-left:-30%;
}
.xlhn_content {
width: 100%;height:100% ;
background: url("${base}/resources/image/hunan_gyact/cytx-bg.png") no-repeat;
background-repeat: no-repeat;
background-position: center;
background-size: cover;
margin: 0px;
padding: 0px;
}
#yidcard{
margin-top:0;
}
.xontent-mid input{
font-size:16px;
}
.xontent-mid{
color: #fff;text-align: center;
padding-top:65%;
font-size:16px;
}
.xontent-bottm{
width:100%;margin-top:150px;text-align: center;
}
.xl_joinin{
display: inline-block;
width: 150px;height:53px ;
background: url("${base}/resources/image/hunan_gyact/tj.png") no-repeat;
background-size: 150px 53px;
}
.xl_joigz{
display: inline-block;
width: 150px;height:53px ;
background: url("${base}/resources/image/hunan_gyact/guanzhu.png") no-repeat;
background-size: 150px 53px;
}
::-webkit-input-placeholder { /* WebKit browsers */
font-size:16px;
}
:-moz-placeholder { /* Mozilla Firefox 4 to 18 */
font-size:16px;
}
::-moz-placeholder { /* Mozilla Firefox 19+ */
font-size:16px;
}
:-ms-input-placeholder { /* Internet Explorer 10+ */
font-size:16px;
}
.xontent-mid input{border-radius: 26px;background: #fff;color: #262626;padding:10px;width:60%;margin-bottom:10px;}
}
@media only screen and (max-device-width:350px) {
html,body{
height: 570px;
}
}
<div class="xlhn_content">
<div class="xontent-mid">
<p><input type="text" name="" id="yname" value="" placeholder="请输入您的真实姓名"/></p>
<p><input type="text" name="" id="yidcard" value="" placeholder="请输入您的身份证号"/></p>
</div>
<div class="xontent-bottm">
<a href="javascript:;" class="xl_joinin" id="getOn"></a>
</div>
</div>
$('#yname').bind('focus',function(){
$('.xontent-bottm').css({'position':'static'});
//或者$('#viewport').height($(window).height()+'px');
}).bind('blur',function(){
$('.xontent-bottm').css({'position':'static'});
//或者$('#viewport').height('auto');
});
$('#yidcard').bind('focus',function(){
$('.xontent-bottm').css({'position':'static'});
//或者$('#viewport').height($(window).height()+'px');
}).bind('blur',function(){
$('.xontent-bottm').css({'position':'static'});
//或者$('#viewport').height('auto');
});