html为什么会超出,请问为什么页面在某些机型上会超出屏幕高度？

题目描述

浏览器模拟只有在iphone6/7/8(plus)下正常，在iphone4会超出屏幕高度，在iphoneX会没达到屏幕高度，下面有空白。

相关代码

// 请把代码文本粘贴到下方(请勿用图片代替代码)

根标签下的三个子元素样式我都用rem设置了高度，但不知道为什么会这样。想来想去最有可能出问题的可能是第三个。是使用了better-scroll

子元素一

.shop-Header[data-v-795a188c] {

height: 3.46667rem;

background-color: #333;

}

二

.shop-nav[data-v-53922493] {

display: flex;

height: 1.06667rem;

border-bottom: 1px solid #eee;

}

三：

.shop-swiperWrapper[data-v-53922493] {

width: 100%;

height: 13.06667rem;

overflow: hidden;

}

.shop-swiperWrapper shop-swiperContent[data-v-53922493] {

position: relative;

display: -webkit-box;

display: -ms-flexbox;

display: flex;

width: 100%;

-webkit-transition: all .5s linear;

transition: all .5s linear;

}

.shop-swiperWrapper shop-swiperConten goods[data-v-53922493] {

-webkit-box-flex: 0;

-ms-flex: 0 0 auto;

flex: 0 0 auto;

width: 100%;

height: 13.22667rem;

}

goods类同级还有两个div，点击后切换。

.shop-swiperWrapper shop-swiperConten goods .goods-list[data-v-53922493] {

position: absolute;

bottom: 0;

right: 0;

left: 0;

top: 0;

display: -webkit-box;

display: -ms-flexbox;

display: flex;

overflow: hidden;

}

better-scroll的wrapper层

.goods-list_wrapper--menu[data-v-53922493] {

min-width: 2.13333rem;

height: 100%;

overflow: hidden;

position: relative;

font-size: 0.34667rem;

background-color: #f5f5f5;

}

.goods-list_content--menu[data-v-53922493] {

padding-bottom: 1.33333rem;

width: 100%;

}

和menu同级的wrapper层

.goods-list_wrapper--dishes[data-v-53922493] {

-webkit-box-flex: 1;

-ms-flex: 1;

flex: 1;

overflow: hidden;

position: relative;

font-size: 0.29333rem;

}

.goods-list_content--dishes[data-v-53922493] {

padding-bottom: 1.33333rem;

width: 100%;

}

跪求大佬帮忙看看，能解决的话愿意给15块(小小心意，请不要嫌少)