htmlcssiframeoverflow

DIV styling such that contained IFRAME doesn't need to scroll

How can I insert an iframe inside a div container such that there is never a scrollbar for the embedded iframe content (the embedded content is never very wide, but often high enough to cause a vertical scrollbar to appear).

In other words, given

<div class="embedded">
    <iframe class="embedded" src="http://xxx.yyy.zzz/content.html"></iframe>
</div>

how can I define

div.embedded { }
iframe.embedded { }

such that the embedded content is always fully visible and never uses a scrollbar?

Solution

  • You could use the library https://iframe-resizer.com/ to keep the iFrame sized to the content.

    Example: https://iframe-resizer.com/examples/