移动端使用v-html时，超出页面无法下滑

2021/12/9

最近在做移动端的时候，获取一个html文件放在div里面，但不知道为什么，页面无法下滑，明明高度已经超过了手机高度，而且刷新后，页面的样式也会改变，用了网上说的overflow：auto还是没用。

<div class="m_problem">
    <UserTitle :msg="'常见问题'"></UserTitle>
    <div class="content">
      <div class="title">{{list.name}}</div>
      <div class="cont" v-html="list.descript"></div>
    </div>
  </div>


    
.m_problem {
  .content {
    padding: .convert(74) [ @vw] .convert(30) [ @vw];
    overflow：auto
    .title {
      width: 100%;
      font-size: 40px;
      font-family: PingFangSC-Semibold;
      color: #333333;
      opacity: 1;
    }
    .cont {
      margin-top: .convert(24) [ @vw];
      width: 100%;
      font-size: 28px;
      font-family: PingFangSC-Regular;
      color: #666666;
      opacity: 1;
      overflow：auto
    }
  }
}

解决

-在内容外面再套一个盒子cont_box，给content一个固定的高度撑开,设置overflow-y:scroll,由于获取的html文件总可能有图片。再将图片的宽度设成100%，避免盒子的宽度被撑开。

<div class="m_problem">
    <UserTitle :msg="'常见问题'"></UserTitle>
    <div class="content">
    
      <div class="cont_box">
        <div class="title">{{ list.name }}</div>
        <div class="cont" v-html="list.descript"></div>
      </div>
    </div>
  </div>

.m_problem {
  //  height: auto;
  position: absolute;
  .content {
    padding: .convert(74) [ @vw] .convert(30) [ @vw];
    height: auto;
    width: 100%;
    overflow-y: scroll;
    height:calc(100vh - .convert(88) [ @vw]);
    .cont_box{
      width: 100%;
      img{
        width:100%;
      }
    }

    .title {
      width: 100%;
      font-size: 40px;
      font-family: PingFangSC-Semibold;
      color: #333333;
      opacity: 1;
      word-break: break-all;
    }
    .cont {
      margin-top: .convert(24) [ @vw];
      width: 100%;
      font-size: 28px;
      font-family: PingFangSC-Regular;
      color: #666666;
      opacity: 1;
      word-break: break-all;
      height: auto;
    }
  }
}

然后就解决啦