WeChat Mini Programs iphoneX background image and button overlap problem?

the background image under the iphonex in WeChat Mini Programs has been lengthened, and the button overlaps with it. How to solve it? Normal under iphone6.

![] [1]

Code

<view class="container">
    <button class="btn"></button>
    <view class="bg">
      <image src="{{image_src}}"></image>
    </view>
</view>

.bg {
  position: fixed;
  bottom: 0px;
  width: 100%;
  height: 100%;
  z-index: -10;
 }
 .bg image {
  width: 100%;
  height: 100%;
 } 
.btn{
  width:400rpx;
  margin-top:100%;
  background-color: rgb(202, 99, 99);
  border-radius:100rpx;
  color:white;
}

generally does not use the background and dom elements to deal with the corresponding relationship, otherwise, some positions of the background are displayed differently under different resolutions, resulting in incorrect relative positions. You can change it to pictures and buttons to deal with


if the background is always full, you need to set the bottom, of the picture dynamically. You need bottom to be suitable for every phone. You can use rem and other methods.

MySQL Query : SELECT * FROM `codeshelper`.`v9_news` WHERE status=99 AND catid='6' ORDER BY rand() LIMIT 5
MySQL Error : Disk full (/tmp/#sql-temptable-64f5-1bf7d3e-320ab.MAI); waiting for someone to free some space... (errno: 28 "No space left on device")
MySQL Errno : 1021
Message : Disk full (/tmp/#sql-temptable-64f5-1bf7d3e-320ab.MAI); waiting for someone to free some space... (errno: 28 "No space left on device")
Need Help?