iframe height not adjusted when clicking on link inside of iframe

I’m using iFrame Resizer to embed a cross domain iframe on a page. This works well, until I click on a link inside of the iframe that takes me to the next page.

In the iframe source page (the remote one) I’ve got the following code in the header:

<script src="https://cdn.jsdelivr.net/npm/iframe-resizer@3.6.1/js/iframeResizer.contentWindow.min.js"></script>

In the page that’s embedding the iframe I’ve got:

<iframe id="crelate-iframe" src="https://foo.bar" frameborder="0" width="100%" scrolling="no">
</iframe>

and in the footer of the page:

<script type='text/javascript' src='https://cdn.jsdelivr.net/npm/iframe-resizer@3.6.1/js/iframeResizer.min.js?ver=1'></script>

<script>
(function($) {
    $(function() {
        $('#crelate-iframe').iFrameResize({
            log: true,
            heightCalculationMethod: 'lowestElement'
        });
    });
})(jQuery);
</script>

The logging doesn’t give away much as far as I can tell. I can only see it initially adjusts the height of the iframe, but when I click through it doesn’t and when the next page’s height is smaller I end up with a bunch of white-space at the bottom.

[MattOpen]

Please have a look at parent div and all DOM elements inside iFrame that might not shrink themselfe I was facing same behavior but was able to remove it with html, body, .body{ min-height:0; }

[davidjbradshaw]

If you have the script on every page, down sizing problems are always down to CSS