automatic iframe resizing with bootstrap grid - html

Question

How do I grow an iframe to match it's height when using bootstrap grids? from what I know, iframes have a fixed height, but when I use a grid to adjust the columns it doesn't resize. So using other solutions that set the height on load does not work.
<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>
For footer.html I have:
<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>
Thanks.

Answer 1

I got it working like this, plus calling it in the body onload event.
I've no idea how to jqueryfy the body onload event with this though...
$( window ).resize(function() {
resizeFrame(document.getElementById('footerIFRAME'))
});
function resizeFrame(f) {
f.style.height = f.contentWindow.document.body.scrollHeight + "px";
}