H5安卓软键盘弹出把底部内容顶上去处理

H5安卓软键盘弹出把底部内容顶上去处理

解决方案就是，监听窗口变化，如果窗口变小就将 body html 高度变大使得内容能够全部展示出来，在窗口变回原来大小的时候body,html高度应该要还原，直接上代码如下

css

.dedicatedLine-box{
    min-height: 100vh;
    font-size: 28px;
    background-color:#FABE00 ;
    .headers-box{
        margin-bottom: 30px;
        background-color: #fff;
        .headers{
            height: 88px;
            .R{
                width: 60px;
            }
            .L{
                width: 60px;
                .arrows{
                    height: 36px;
                    width: 30px;
                    background: url("~img/back.png") no-repeat center;
                    background-size: cover;
                }
            }
            .title{
                text-align: center;
                line-height: 66px;
                flex:1;
            }
        }
        // .top-box{
        //     height: 40px;
        // }
    }
    .content-box{
        padding: 0 40px;
        height: calc(100% - 178px);
        .content{
            background-color: #fff;
            height: 100%;
            padding: 0 30px;
            .dot-box{
                height: 54px;
                margin-bottom: 35px;
                padding: 0 15px;
                .dot-item{
                    width: 16px;
                    height: 16px;
                    border-radius: 50%;
                    background-color: #FABE00;
                    overflow: hidden;
                }
            }
            .items{
                height: 80px;
                border-bottom: 1px solid #B1B1B1;
                margin-bottom: 20px;
                .label{
                    width: 150px;
                    text-indent: 10px;
                    font-size: 28px;
                    color: #666666;
                    font-weight: 500;
                }
                .inpt-box{
                    flex:1;
                    input{
                        height: 60px;
                        outline: none;
                        border: none;
                        color: #262626;
                    }
                }
            }
            .textarea-boxs{
               
                .label{
                    padding-top: 40px;
                    font-size: 28px;
                    color: #666666;
                    margin-bottom: 30px;
                    text-indent: 10px;
                }
                .detail-box{
                    height: 120px;
                    padding: 0 10px;
                    border-bottom: 1px solid #B1B1B1;
                    textarea{
                        flex: 1;
                        resize: none;
                        height: 112px;
                        font-size: 28px;
                        color: #262626;
                        outline: none;
                        border: none;
                    }
                }
                .miaoshu{
                    font-size: 24px;
                    color: #999999;
                    line-height: 36px;
                    margin-top: 15px;
                    margin-bottom: 35px;
                }
                
            }
            .btn-box{
                padding: 0 20px;
                margin-top: 40px;
                height: 90px;
                .btn{
                    
                    width: 100%;
                    height: 88px;
                    outline: none;
                    border: none;
                    border-radius: 44px;
                    font-size: 32px;
                    color: #262626;
                    letter-spacing: 10px;
                    font-weight: 500;
                    background-color: #FABE00;
                }
            }
        }
    }
    .footers{
        height: 354px;
        width: 750px;
        background: url("~img/image_2.png") no-repeat center;
        background-size: cover;
        position: absolute;
        bottom: 0;
        left: 0;
        z-index: 10;
        
    }
}