微信h5界面弹出键盘把背景页面压变形怎么解决？
@charset "utf-8";
/* CSS Document */
@media{
.page{
max-width: 760px;
height: 100%;
margin: 0 auto;
text-align: center;
overflow: hidden;
position: relative;
}
}
/****************************** 弹出 *********************************8888*/
html,body{
width: 100%;
height: 100%;
margin: 0;
padding: 0;
overflow: hidden;
}
section{
width: 100%;
height: 100%;
}
section .bgc{
width: 100%;
height: 100%;
background:url("../images/bgc2.png") no-repeat;
background-size: 100% 100%;
position: relative;
}
section .bgc .zhe-zhao{
width: 100%;
height: 100%;
background-color:rgba(0,0,0,0.5);
top: 0;
left: 0;
overflow: hidden;
}
section .bgc .zhe-zhao .t-chu{
width: 75%;
height: 8.5rem;
background-color: #2a2a2a;
margin: 0 auto;
margin-top: 2.5rem;
border-radius: 20px;
}
section .bgc .zhe-zhao .t-chu .zhonghai{
width: 55%;
margin: 0 auto;
}
section .bgc .zhe-zhao .t-chu .zhonghai .Z-H{
width: 100%;
margin-top: 0.8rem;
}
section .bgc .zhe-zhao .t-chu .font{
width: 84%;
margin: 0 auto;
}
section .bgc .zhe-zhao .t-chu .font .cha-xun{
width: 100%;
margin-top: 0.5rem;
}
section .bgc .zhe-zhao .t-chu .t-yuan{
width: 80%;
height: 2rem;
background-color: #e0e0e0;
margin: 0 auto;
border-radius: 70%;
margin-top: 0.4rem;
}
section .bgc .zhe-zhao .t-chu .t-yuan .S-F{
width: 58%;
}
section .bgc .zhe-zhao .t-chu .t-yuan .ma .ma1{
width: 50%;
font-size: 0.35rem;
margin: 0 auto;
color: #e50602;
}
section .bgc .zhe-zhao .t-chu .shuzi{
width: 100%;
margin: 0 auto;
color: #e50602;
font-size: 0.3rem;
margin-top: 0.2rem;
}
section .bgc .zhe-zhao .t-chu .shuzi .shuzi1{
width: 44%;
text-align: left;
margin-top: 0.3rem;
}
section .bgc .zhe-zhao .t-chu .shuzi .shuzi2{
width: 17%;
text-align: right;
margin-top: 0.3rem;
}
section .bgc .zhe-zhao .t-chu .bu-tton{
margin-top:0.3rem;
width: 100%;
}
section .bgc .zhe-zhao .t-chu .bu-tton .btn{
background-color: #e50602;
border: none;
padding: 0.1rem 0.8rem;
border-radius: 10px;
width: 70%;
height: 0.8rem;
}
section .bgc .zhe-zhao .t-chu .bu-tton .btn .btn-1{
width: 70%;
}
section .bgc .zhe-zhao .t-chu .baoqian{
width: 100%;
}
section .bgc .zhe-zhao .t-chu .baoqian1{
width: 87%;
margin: 1.5rem 0;
}
/****************************** 弹出完 *********************************8888*/
/****************************** 消费者 *********************************8888*/
header{
width: 100%;
height: 100%;
background: url("../images/bgc.png") no-repeat;
background-size: 100% 100%;
position:absolute;
}
header .head{
width: 100%;
height: 1rem;
background-color: #1f8ce8;
line-height: 1rem;
color: #ffffff;
font-size: 0.45rem;
position:absolute;
left:0;
top:0
}
header .head .j-t{
width: 10%;
float: left;
}
header .head .r-r{
width: 10%;
float: right;
}
header .head .jiantou{
width: 40%;
margin-left: 5px;
}
header .head .ren{
width: 64%;
margin-right: 5px;
}
header .head .jiantou, header .head .ren{
margin-top: 0.25rem;
}
.yijian1{
position:absolute;
left:0;
top:1rem;
}
.yijian2{
position:absolute;
left:0;
top:4.2rem;
}
header .yijian{
width: 100%;
height: 3rem;
background-color:rgba(255,255,255,0.5);
margin-top:0.2rem;
}
header .yijian .yi-jian{
border-bottom: 1px solid #bababa;
text-align: left;
font-size: 0.4rem;
padding: 0.2rem 0 0.2rem 0;
}
header .yijian textarea{
width: 100%;
border: none;
height: 2rem;
background-color:rgba(255,255,255,0);
font-size: 0.35rem;
}
header .x-d{
width: 100%;
height: 2rem;
background-color:rgba(255,255,255,0.5);
margin-top:0.2rem;
font-size: 0.35rem;
position: absolute;
left: 0;
top: 7.5rem;
}
header .x-d .p-x, header .x-d .p-d{
width: 80%;
height: 0.6rem;
border: none;
background-color:rgba(255,255,255,0);
font-size: 0.35rem;
}
header .x-d .p-x{
margin-top:0.1rem;
}
header .x-d .solid{
border-bottom: 1px solid #bababa;
padding-bottom: 0.2rem;
}
header .x-d .p-d{
margin-top:0.2rem;
}
header .btn1{
width: 100%;
height: 1rem;
margin-top: 0.8rem;
position: absolute;
left: 0;
top: 9.2rem;
}
header .btn1 .btn2{
width: 75%;
background-color: #1f8ce8;
border: none;
height: 1rem;
border-radius: 5px;
color: #ffffff;
font-size: 0.4rem;
font-family: "微软雅黑",Arial,Helvetica;
}
header .xinxi{
width: 100%;
height: 6rem;
background-color:rgba(255,255,255,0.5);
text-align: left;
font-size: 0.35rem;
overflow: hidden;
}
header .xinxi .xinxi2{
margin-top:0.25rem;
text-align: left;
height: 0.7rem;
line-height: 0.7rem;
border-bottom: 1px solid #bababa;
padding-bottom: 0.2rem;
}
header .xinxi .xinxi3{
margin-top:0.2rem;
text-align: left;
height: 0.7rem;
line-height: 0.7rem;
border: none;
padding-bottom: 0.2rem;
}
header .xinxi .xinxi2 .in-put{
width: 66%;
height: 0.5rem;
padding: 3px;
background-color:rgba(255,255,255,0);
border: none;
font-size:0.35rem;
}
header .xinxi .xinxi3 .in-put{
width: 57%;
height: 0.5rem;
padding: 3px;
background-color:rgba(255,255,255,0);
border: none;
}
/****************************** 消费者完 *********************************8888*/
/****************************** 首页 **********************************/
.index_bg{
width:100%;
height:100%;
background:url(../images/bg.png) no-repeat;
background-size:100% 100%;
}
.index_bg .logo{
width: 40%;
margin: 0 auto;
}
.index_bg .logo img{
width: 100%;
margin-top:1rem;
}
.index_bg .yan{
width: 40%;
margin: 0 auto;
text-align:center;
font-size:0.35rem;
color:#fff;
}
.index_bg .yan img{
width: 80%;
margin-top: 0.5rem;
}
.index_bg .yan .cli_yan{
margin-top:0.2rem
}
.index_bg .user{
width: 40%;
margin: 0.4rem auto 0;
text-align: center;
}
.index_bg .user img{
width: 30%;
vertical-align: middle;
}
.index_bg .user span{
font-size:0.3rem;
color:#fff;
display:inline-block;
}
.index_bg .btn_box{
width:60%;
margin:0.3rem auto;
text-align:center;
}
.index_bg .btn_box .btn{
width: 100%;
height: 0.8rem;
box-shadow: #1dfefe 0 0 1px 1px;
background: #035ab9;
margin-top: 0.2rem;
font-size: 0.36rem;
line-height: 0.8rem;
color: #fff;
border-radius: 5px;
}
.btn_a{
color: #fff;
}
/****************************** 首页完 **********************************/
/****************************** 农化知识库 **********************************/
header .head {
width: 100%;
height: 1rem;
background-color: #1f8ce8;
line-height: 1rem;
color: #ffffff;
font-size: 0.45rem;
}
header .head .j-t {
width: 10%;
float: left;
}
header .head .r-r {
width: 10%;
float: right;
}
header .head .jiantou{
width: 40%;
margin-left: 5px;
}
header .head .ren{
width: 64%;
margin-right: 5px;
}
header .head .jiantou, header .head .ren{
margin-top: 0.25rem;
}
header .main{
width: 100%;
background: rgba(255,255,255,0.72);
color: #565656;
font-size: 0.4rem;
margin-top: 0.1rem;
}
header .main .title{
width: 100%;
height: 1rem;
color: #565656;
font-size: 0.4rem;
line-height: 1rem;
text-align: left;
padding-left: 0.4rem;
border-bottom:#bababa 1px solid
}
header .main .title img{
width: 5%;
vertical-align: middle;
}
header .main .fen{
width: 88%;
height: 1rem;
margin: 0 auto;
color: #565656;
font-size: 0.35rem;
line-height: 1rem;
text-align: left;
padding: 0 5%;
border-bottom: #bababa 1px solid;
}
header .main .fen span{
float:left;
}
header .main .fen img{
width: 3.5%;
float: right;
margin-top: 0.25rem;
}
var HEIGHT = $('body').height();
$(window).resize(function() {
$('.main').height(HEIGHT);
});
qq_夜深沉_01回答
-
qq_安逸_4
把键盘设置成封层，不和页面在一层次显示。
随时随地看视频慕课网APP
相关分类
JavaScript