Solution 1 :

It is definitively not possible to do this with just CSS. You’ll have to use some JavaScript, as you’re doing.

Problem :

I have an iframe with content which is dynamic in height and width.

<iframe id="myIframe" src="../xxx/xxx" scrolling="no" frameBorder="0"></iframe>

I am able to change the height and width using JavaScript so that my iframe is no bigger than it’s content.

var iframe = document.getElementById("myIframe");
iframe.height = iframe.contentWindow.document.body.scrollHeight + 'px';
iframe.width = iframe.contentWindow.document.body.scrollWidth + 'px';

How can I do this using only CSS? Thanks to anyone who can provide guidance.


Comment posted by Rene van der Lende

For as far I know the limiting factors are the width and height of 1) the parent of the