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

发布于
2019-11-27

题目描述

浏览器模拟只有在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块（小小心意，请不要嫌少）

html

html5 css

阅读 2.4k

2 个回答

牛书书

✓ 已被采纳

不同手机宽高比例一般不一样，所以同一页面，通常我们将页面宽度（设计图宽度）映射为屏幕宽度，而在高度上采用自适应的办法。
如果你要固定头部，内容区域自适应，解决办法可以考虑：

flex弹性布局
calc设置高度自适应

对于DOM:

<div class="container">
  <div class="header"></div>
  <div class="content"></div>
</div>

第一种办法：

.container {
  height: 100vh; // 100vh取到视窗高度
  display: flex;
  flex-direction: column;
  display: flex;
  overflow: hidden;
}

.header {
  height: 3.5rem;
  flex-shrink: 0;
}

.content {
  flex: auto;
  overflow: auto;
}

第二种办法很简单

.container {
  --headerH: 3.5rem; // 定义一个变量，在后代元素中可以使用var提取变量，因为后代元素样式中要用到多次这个值
}

.header {
  height: var(--headerH);
}

.content {
  height: calc(100vh - var(--headerH));
  overflow: auto;
}

另外提一点，像width: 100%这个样式，对于文档流中的dom元素通常是多余的，应该充分利用block元素的特性（自动占满父元素宽度，所以不需要100%）。