h5页面全屏背景键盘弹起导致页面变形

2024-06-30 07:29| 来源: 网络整理| 查看: 265

1、首先要初始化样式(app.vue)

*{ margin: 0; padding: 0; } li{ list-style: none; } input,button{ border:none; outline-style: none; } /*上边可自行定义*/ #app { min-height: 100vh;/*最小高度*/ overflow:hidden;/*这里不写可能会导致底部出现白边或滚动条*/ -webkit-box-sizing: border-box; box-sizing: border-box; position: relative; } 复制代码

2、页面中要动态计算高度(可以使用clientHeight、offsetHeight、innerHeight，具体根据实际情况)

export default { name:'regionphone', data() { return { phone:'', code:'', bodyHeight:'' } }, components: { }, methods: { }, mounted(){ this.bodyHeight = document.documentElement.offsetHeight;//注意：这里动态计算页面高度 } } .mian_bg { height: 100%; background: url('../../static/img/bottomBanner.png') repeat-y;/*这里是为了填充底部白条区域*/ } #bgPic { width: 10rem; margin: 0 auto; } #textInde{ position: absolute; top:10.3rem; width: 100%; height: 6rem; } #textInde li{ height: 1rem; margin: 0 0 .36rem; } #btntype{ margin-top: .8rem!important; height: 2rem!important; } #textInde li>input{ width: 6.8rem; font-size: 14px; margin-left: 2.4rem; display: inline-block; height: 1rem; background-color: transparent; } #yzm{ width: 3.8rem!important; } #sendyzm{ display: inline-block; width:3rem; height: 1rem; vertical-align: middle; background-color: transparent; } #btntype button{ display: inline-block; width: 100%; height: 100%; cursor: pointer; margin-top: -.3rem; background-color: transparent; } 复制代码

【本文地址】

公司简介

联系我们