「小贴士」让＜iframe＞中的内容完全契合＜iframe＞的宽度，消除＜iframe＞的水平滚动条

页面嵌有<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>