页面嵌有<iframe>
元素,其宽高都被设为100%
,无论如何调整页面的大小,始终有滚动条出现,问题如下图:
做过的尝试:
- 调整
<iframe>
中的页面的body元素的属性:box-sizing: border-box;
问题依旧; - 在做了上一步的设置后,再设置这个
body
元素的宽为100%
、100vw
,问题依旧;
实在找不到原因后,只能用给宽度做减法的方法,设置这个body
元素的宽度为:calc(100% - 20px)
,20px
为目测的估值。具体做法为:在页面HTML文档加载完成后,再对<iframe>
加载的子页面的body
元素的宽度做上述设置。
.
.
.
<!-- 主体内容区 -->
<div class="layui-body">
<iframe class="main-content" src="/admin/home/welcome" frameborder="0" onload="resetIframeHeight(this)"></iframe>
</div>
.
.
.
<script>
function resetIframeHeight(iframe) {
// 让水平滚动条消失
$('iframe').contents().find('body').css('width', 'calc(100% - 20px)');
}
</script>