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;
}
}
}
然后就解决啦