使用iframe的高度调整html页面内容的高度

Question

我有一个html页面，我通过iframe拉到另一个页面。 iframe根据窗口屏幕大小高度调整其高度。但iframe中的内容不会调整大小以适应iframe。如何根据窗口高度使iframe大小高度调整iframe中的html内容？

以下是我的Index.html中的HTML：

<a class="desktopViewOnly" id="modalPopupDesktop" data-src="Int_Sim.html" data-fancybox data-type="iframe" href="javascript:;">
   <img src="images/images/device.png">
</a>

以下是我的Index.html中的CSS：

.fancybox-slide--iframe .fancybox-content {
   width: 100vw!important;
   height: 100vh!important;
   max-width: 880px!important;
   max-height: 580px!important;
   margin: 0;
   border-radius: 50px;
}
.fancybox-error,
.fancybox-iframe {
   border-radius: 37px;
   max-width: 880px;
   max-height: 580px;
}

.fancybox-close-small {
   background: #000!important;
}

这是用于在我的Int_Sim.html中调整大小的JS：

var $el = $(".simulator");
var elHeight = $el.outerHeight();
var elWidth = $el.outerWidth();
var $wrapper = $(".sim-container");

var starterData = {
    size: {
        width: $wrapper.width(),
        height: $wrapper.height()
    }
}

function doResize(event, ui) {

    var scale, origin;

    scale = Math.min(
        ui.size.width / elWidth,
        ui.size.height / elHeight
    );

    $el.css({
        transform: "scale(" + scale + ")"
    });
    console.log("doResize is working!");
}
doResize(null, starterData);

我不确定为什么这个JS没有在iframe中调整我的内容。