javascript - iframe css问题

问题描述

问 题

1. 如果所示，本意是在红色主体区域放一个iframe。代码就是下面注释的iframe

    <#--<!-- Content Wrapper. Contains page content &ndash;&gt;-->
     <div class="content-wrapper">
         <section class="content">
             <#--<iframe src="#" frameborder="0" scrolling="no" width="100%" id="content-frame" onload="setIframeHeight(this)">-->
   
             <#--</iframe>-->
         </section>
     </div>
   

现在注释了

现在右边是没有滚动条的。
现在去掉iframe的注释，右侧滚动条出现。看最下面还有红色的背景，大概10px左右。

实在搞不懂这里为什么出现,我js算的没问题啊。
我本意是iframe里的高度如果不足外面红色主体部分，就撑满。
代码：

 function setIframeHeight(iframe) {
        if (iframe) {
            var iframeWin = iframe.contentWindow || iframe.contentDocument.parentWindow;
            if (iframeWin.document.body) {
               // iframe.height = iframeWin.document.documentElement.scrollHeight || iframeWin.document.body.scrollHeight;
                var minHeight= document.documentElement.clientHeight - 50;//50是上面头部高度
                iframe.height = Math.max(iframe.height, minHeight);
            }
        }
    };

    window.onload = function () {
        setIframeHeight(document.getElementById('content-frame'));
    };

请大神帮忙看看

解决方案

问题解决，其实只要给iframe加一个display:block;即可。

这篇关于javascript - iframe css问题的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！