iframe css问题

Question

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'));
    };

请大神帮忙看看

Answer 1

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

Answer 2

iframe.height = Math.max(iframe.height, minHeight);
//你试试改成
iframe.style.height = Math.max(iframe.height, minHeight)+"px";

Answer 3

https://jsfiddle.net/dzoqLfxm/
这样不知可行不，试了下