iframe轻微滚动及无法滚动和100%宽度超出屏幕

neabea2016

于 2018-09-17 09:37:13 发布

阅读量2.1k

点赞数

CC 4.0 BY-SA版权

分类专栏： H5

本文链接：https://blog.youkuaiyun.com/neabea2016/article/details/82732538

H5 专栏收录该内容

6 篇文章

订阅专栏

本文介绍了如何解决iframe在不同场景下的兼容性和体验问题，包括消除轻微滚动、实现移动端上下滚动及调整宽度避免超出屏幕等实用CSS技巧。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

1.使用iframe页面会有轻微上下滚动

.iframe-style{
	height: 100%;
	width: 100%;
	border: none;
	margin: 0;
	vertical-align: top;/*解决轻微滚动*/
}

2.iframe适配安卓移动端，有时无法上下滚动
解决：无法滚动的html div增加overflow属性 absolute布局

.detai-item-scroll{
	margin-left: 0.62rem;/*10px*/
	margin-right: 0.62rem;
	position: absolute;
	top: 3.25rem;/*52px*/
	bottom: 2.87rem;/*46px*/
	width:calc(100% - (0.62rem) * 2);
	box-sizing: border-box;
	overflow: scroll;
}

删除滚动条

.detai-item-scroll::-webkit-scrollbar{
	display: none;
}

3.宽度设置为100%，使用margin/padding会超出屏幕宽度，可以使用calc进行宽度计算，再加上box属性用于padding向里压缩

	width:calc(100% - (0.62rem) * 2);//0.62rem是padding距离
    box-sizing: border-box;