Unfortunately there is no "easy" way to dynamically set the iFrame's height based on its content, however, there is a useful solution which is what we have implemented on our own website here https://www.loopedin.io/our-roadmap

This solution is taken from this StackOverflow solution:

-----

1. Add the following iFrame snippet to your website HTML, adding in your public roadmap URL:

<div> <iframe id="IframeId" src="YOUR_ROADMAP_URL" style="width:100%;" onload="setIframeHeight(this)"></iframe> </div>

2. Next you need to add the following JavaScript snippet to your website HTML:

window.addEventListener('message', function (event) {
    if (event.data.hasOwnProperty("FrameHeight")) {
        $("#IframeId").css("height", event.data.FrameHeight);
    }
});

Next you need to add another JavaScript snippet (below). On iFrame load you have to send message to iFrame window content with "FrameHeight" message. This function is already being called through the "onload" property on the iFrame snippet from step 1, but it's not been added to your website HTML yet, so add this:

function setIframeHeight(ifrm) {
    var height = ifrm.contentWindow.postMessage("FrameHeight", "*");
}

3. You're done! The public LoopedIn roadmap page takes care of the next step and dynamically sets the iFrame height accordingly based on the content. For clarity, the third step from the StackOverflow solution (outlined below), does not need to be done by you - this is already implemented within LoopedIn.

window.addEventListener('message', function (event) {

    if (event.data == "FrameHeight") {
        var body = document.body, html = document.documentElement;
        var height = Math.max(body.scrollHeight, body.offsetHeight,
        html.clientHeight, html.scrollHeight, html.offsetHeight);

       event.source.postMessage({ "FrameHeight": height }, "*");
    }
});