HTML/CSS - resize dynamically iframe without using javascript

Question

I'm using a javascript to resize an iframe relative to its content. The goal is to display the content and using the scroll of the parent of the iframe only.

HTML

<div id="content">
    <iframe name="tht" width="100%" src="path" onload='javascript:resizeIframe(this);'></iframe>
</div>

JAVASCRIPT

function resizeIframe(obj) {
    obj.style.height = obj.contentWindow.document.body.scrollHeight + 'px';
}

I want to have the same behavior without using javascript (only css).

I tried to use height="100%" but the scroll of the iframe appears.

Edit: I don't have a problem to use a javascript solution, but sometimes the iframe resizing takes a long time and sometimes the resizing doesn't work: there is no display.

does your iframe have any absolute or fixed positioned or floated elements? — Karim AG
– Karim AG, Commented Apr 29, 2014 at 13:55

0x5C91 · Accepted Answer · 2014-04-29 13:39:26Z

1

<iframe src="http://www.example.com/" 
        class="iframe" 
        width="100%" 
        height="400px" 
        scrolling="no" 
        frameborder="0">
</iframe>

You can use above in this there is width="100%" specified but the height will be fixed.

You can try by resizing your browser.

edited Apr 29, 2014 at 13:39

0x5C91

3,5354 gold badges36 silver badges48 bronze badges

answered Apr 29, 2014 at 13:06

user3568361

764 bronze badges

Sign up to request clarification or add additional context in comments.

1 Comment

Jils Over a year ago

I modified 'heigth' to 100% butthe iframe doesn't disply all the content. And its appears that 'scrolling' is obsolete in HTML5

Collectives™ on Stack Overflow

HTML/CSS - resize dynamically iframe without using javascript

1 Answer 1

1 Comment

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

1 Comment

Your Answer

Sign up or log in

Post as a guest

Related