Iphonex下部ボタンfixed,bottom:0下部留白の問題を解決する

注意:viewport-fit=「cover」と組み合わせて使用

ソリューション:

    
      
    
  fixed  

// css   
.wrapper{
    position: relative;
    padding-bottom: 100px;
    box-sizing: border-box;
}
.main-wrapper{
    overflow: auto;
}
.btn-wrapper{
    width: 100%;
    height: 100px;
    position: fixed;
    left: 0;
    bottom: 0;
}
// iphonex         
//iphoneX、iphoneXs
@media only screen and (device-width: 375px) and (device-height: 812px) and (-webkit-device-pixel-ratio: 3) {
    .wrapper{
        height: 100vh;
        overflow: hidden;
    }
    .main-wrapper{
        height: 100%;
    }
}
//iphone Xs Max
@media only screen and (device-width: 414px) and (device-height: 896px) and (-webkit-device-pixel-ratio:3) {
    .wrapper{
        height: 100vh;
        overflow: hidden;
    }
    .main-wrapper{
        height: 100%;
    }
}
//iphone XR
@media only screen and (device-width: 414px) and (device-height: 896px) and (-webkit-device-pixel-ratio:2) {
    .wrapper{
        height: 100vh;
        overflow: hidden;
    }
    .main-wrapper{
        height: 100%;
    }
}