html - 使用 Bootstrap 网格自动调整 iframe 的大小

Question

使用 bootstrap 网格时如何增加 iframe 以匹配它的高度？据我所知，iframe 具有固定的高度，但是当我使用网格调整列时，它不会调整大小。因此，使用其他设置负载高度的解决方案不起作用。

<div class="container-fluid">

    <div class="row">
        <div class="col-md-12">
            <div>
                <DIV>
                    <DIV>
                        <IFRAME XXXstyle="min-height: 100%; width:100%" xstyle="BORDER-TOP: 0px; HEIGHT: 100%; BORDER-RIGHT: 0px; WIDTH: 100%; BORDER-BOTTOM: 0px; BORDER-LEFT: 0px" 
                            frameBorder=0
                            scrolling=no src="footer.html">
                        </IFRAME>
                    </DIV>
                </DIV>
            </div>
        </div>
    </div>
</div>

对于 footer.html 我有:

<div class="container-fluid">
    <div class="row">
        <div class="col-md-2 col-md-offset-1">
        </div>
        <div class="col-md-2 ">
        </div>
        <div class="col-md-2 ">
        </div>
        <div class="col-md-2 ">
        </div>
        <div class="col-md-2 ">
        </div>
    </div>
</div>

谢谢。

Answer 1

我让它像这样工作，并在 body onload 事件中调用它。

虽然我不知道如何用这个对 body onload 事件进行 jqueryfy...

$( window ).resize(function() {
  resizeFrame(document.getElementById('footerIFRAME'))
});

function resizeFrame(f) {
  f.style.height = f.contentWindow.document.body.scrollHeight + "px";
}