【移动端】h5页面要求兼容各种机型一屏展示（不出现滚动条）

Question

要求：兼容大部分手机屏幕，一屏展示，不出现任何滚动条，现在在部分机型下会出现上下滑动的滚动条

区域1 固定高度 44px
区域2 固定高度 140px
区域2 固定高度 60px
区域4 高度自适应 内容超出滚动

区域1-4 组成一个可以可以滑动的swiper-container 高度是80%

区域5 没设置高度

`

  <template>
    <div class="dd">
    <div class="top" id="区域1">
     <!-- 固定高度44px 后期转化成rem -->
    </div>

<div class="swiper-container">
  <div class="swiper-wrapper">
    <div class="swiper-slide">
      <div style="height: 140px; padding-top: 55px" id="区域2">
        <!-- 内容  固定高度140px -->
      </div>

      <div class="inter" id="区域3">
        <!-- 无特殊要求 内容一般一行 最多两行展示完 -->
      </div>
      <div class="sen" id="区域4">
       <!-- 内容不定，有时候很多，有时候很少，高度自适应，超出高度滚动 -->
      </div>
    </div>
  </div>
</div>
<div style="width: 50%; margin: 0 auto" id="区域5">
  <!-- 不随着区域2 3 4 左右滑动 -->
  <van-button>不再标记</van-button>
</div>
</div>
</template> 

`

<style lang="scss" scoped>
.word {
  h1 {
    font-size: 36px;
  }
  h2 {
    font-size: 20px;
    font-weight: normal;
  }
  .top {
    display: flex;
    justify-content: space-between;
    height: 44px;
    align-items: center;
  }
  .pop {
    margin-left: 20px;
  }
  .pup-title {
    width: 100%;
    background-color: #ffce43;
    color: black;
    font-weight: bold;
    text-align: center;
    padding: 8px 3px;
    position: relative;
  }
  .hide {
    position: absolute;
    right: 5px;
    top: 8px;
  }
  /deep/.van-popup--left {
    width: 180px;
    overflow-x: hidden;
    overflow-y: auto;
  }
  .btn-text {
    margin-left: 5px;
    font-weight: bold;
  }
  .num {
    margin-right: 10px;
    span {
      display: inline-block;
      padding: 5px 20px;
      box-sizing: border-box;
      font-weight: bold;
      color: #fff;
      background-color: #595959;
      border-radius: 20px;
      letter-spacing: 3px;
      text-align: center;
    }
  }

  .swiper-container {
    margin-top: 5px;
    height: 80%;
  }
  .swiper-slide {
    height: 100%;
    text-align: center;
  }
  .inter {
    display: flex;
    align-items: center;
    text-align: left;
    margin-left: 20px;
    color: #ffce43;
    height: 60px;
    span {
      font-size: 16px;
    }
  }
  .sen {
    color: black;
    text-align: left;
    height: calc(100% - 240px);
    overflow-x: hidden;
    padding: 20px;
    box-sizing: border-box;
    overflow-y: scroll;
    p {
      font-size: 14px;
      line-height: 24px;
      max-width: 100%;
      padding: 0;
      margin: 0;
    }
  }
  .van-button--info {
    border: 0.02667rem solid #ffce43;
  }
}
</style>

Answer 1

css提供的不全呀。

讲道理看你设置的项没有会超的可能呀

---

这里的80% 是无效的，可以用80vh