Welcome to the Treehouse Community

Want to collaborate on code errors? Have bugs you need feedback on? Looking for an extra set of eyes on your latest project? Get support with fellow developers, designers, and programmers of all backgrounds and skill levels here with the Treehouse Community! While you're at it, check out some resources Treehouse students have shared here.

Looking to learn something new?

Treehouse offers a seven day free trial for new students. Get access to thousands of hours of content and join thousands of Treehouse students and alumni in the community today.

Start your free trial

HTML

Posted by jne
jne
12,613 Points

Have content in iframe to scale to fit the iframe

I wan't to make a website with an iframe and when i click a link a webpage opens in the iframe.(Don that) Let's say the iframe is min-width 480px, but i wan't the webpage in the iframe to scale so the entire webpage shows in it and no scroll bars(overflow:hidden) is necessary.(how to?)

Lucas Krause
Lucas Krause
19,924 Points

Do you event want to avoid vertical scrolling?

jne
jne
12,613 Points

Edit: I do want vertical scrolling but not horizontal.

2 Answers

Lucas Krause
Lucas Krause
19,924 Points
Lucas Krause
Lucas Krause
19,924 Points

Good news! According to the MDN documentation for <iframe> the seamless attribute allows you to style the loaded page from the page including the <iframe>. Tested it but it doesn't seem to work yet - neither in Chrome nor in Firefox :(

jne
jne
12,613 Points

I looked at that earlier when googling about this. But I couldn't make it work either...Could this be a browser compatible problem?

Lucas Krause
Lucas Krause
19,924 Points

Yes, it seems so.

Lucas Krause
Lucas Krause
19,924 Points
Lucas Krause
Lucas Krause
19,924 Points

Sorry, but I think this isn't possible. The best result seems to be loading a responsive designed website into the <iframe> and make the <iframe> element itself tall enough to prevent it from vertical scrolling. Beside responsive webdesign (layout depending on browser's or <iframe>'s width) you can also make sure that the loaded website doesn't become taller than the available vertical space (i.e. the <iframe>'s height) by using CSS and/or JavaScript inside of your document loaded into the <iframe>.

jne
jne
12,613 Points

I edited my comment above. I do want vertical scrolling. What I do is to have different sites I like to open up in the iframe. And to make it fit nicely.

Lucas Krause
Lucas Krause
19,924 Points

Okay fine. But this isn't possible neither. I'm sorry. The only way to establish that would be to edit the code of the website loaded into the iframe. For example to have a webpage fit into a static-sized iframe you could include the following JavaScript into that webpage an execute it after the page is fully rendered (i.e. window.onload).

document.getElementsByTagName("html")[0].style.overflow="hidden";
document.body.style.margin="0";
document.body.style.display="inline-block";
document.body.style.transformOrigin="top left";
document.body.style.transform="scale("+Math.min(window.innerWidth/document.body.offsetWidth, window.innerHeight/document.body.offsetHeight, 1)+")";

Example. Also try to load this document into your <iframe>.

But establishing this from the website including the <iframe> won't work.