移动端页面键盘弹出后导致body高度变低背景图片被挤上去解决方法

移动端页面键盘弹出后导致body高度变低背景图片被挤上去解决方法

本身在设置背景图片的时候是将html,body的高度设为100%，然后

.main{
  height: 100%;
  background: url('../assets/images/[email protected]') no-repeat left top;
  background-size: 100% 100%;
}

但是这样写就会导致键盘弹出的时候html和body的高度从原来的100%变为（100%-键盘高度），这样的话main的height:100%也会变成（100%-键盘高度），所以需要强行将main的高度设置为html原本的100%。

<div class="main" :style="{ height: bodyHeight + 'px' }">
</div>

mounted(){
 this.bodyHeight=document.documentElement.clientHeight
}