为了账号安全,请及时绑定邮箱和手机立即绑定

​微信h5界面弹出键盘把背景页面压变形怎么解决?

​微信h5界面弹出键盘把背景页面压变形怎么解决?

qq_夜深沉_0 2017-01-07 13:16:06
@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);        });
查看完整描述

1 回答

?
qq_安逸_4

TA贡献12条经验 获得超5个赞

把键盘设置成封层,不和页面在一层次显示。
查看完整回答
反对 回复 2017-01-10
  • 1 回答
  • 1 关注
  • 2673 浏览
慕课专栏
更多

添加回答

举报

0/150
提交
取消
意见反馈 帮助中心 APP下载
官方微信