猿问

​微信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_夜深沉_0
浏览 2674回答 1
1回答

qq_安逸_4

把键盘设置成封层,不和页面在一层次显示。
随时随地看视频慕课网APP

相关分类

JavaScript
我要回答