Iframe Resizing
Hi, all. Is their any way I could persuade my iframe to resize with the browser window. My webpage is here, btw. (The iframe is the big grey box.)
Hi, all. Is their any way I could persuade my iframe to resize with the browser window. My webpage is here, btw. (The iframe is the big grey box.)
chrishirst posted this at 07:11 — 27th July 2005.
He has: 379 posts
Joined: Apr 2005
Use % for setting your widths.
nadamt posted this at 07:24 — 27th July 2005.
They have: 18 posts
Joined: Jul 2005
I'm sorry. I should have mentioned that, with no resolve, I've tried that (and--might I add--I've had to see my poor sight go through more distortions than a Mike Tyson yes-man). I am sure the answers lies in percentages, unfortunately, the ones that I've tried donnot work.
chrishirst posted this at 10:34 — 27th July 2005.
He has: 379 posts
Joined: Apr 2005
You have to make the parent container % widths as well.
<div style="height:200px;width:80%;margin:0px auto;"><iframe width="100%" height="100%" src=""></iframe>
</div>
Chris
Indifference will be the downfall of mankind, but who cares?
Venue Capacity Monitoring
Code Samples
nadamt posted this at 14:32 — 27th July 2005.
They have: 18 posts
Joined: Jul 2005
Thanks, man, but it didn't work. Just as well though, my site is cumbersome enough as it is.
chrishirst posted this at 15:02 — 27th July 2005.
He has: 379 posts
Joined: Apr 2005
Hmm! Your IFrame is inside a table cell sized at 960px so it ain't going to change no matter what you do other than changing that table size.
nadamt posted this at 19:19 — 27th July 2005.
They have: 18 posts
Joined: Jul 2005
I appriciate your persistence, so much so, that I wouldn't mind asking you how would I go about making the background text not adjust itself as the browser window window resizes? I've tried different overflow tweaks and had no luck. I suspect it has something to do with the auto overflow attribute in the html tag. But I tried to modify it in conjunction with #bg overflow and got nowhere.
Here is my stylesheet* (the background text is labelled "BACKGROUND AMBIANCE"):
html, body { height: 100%; overflow: auto }/* BACKGROUND AMBIANCE*/
#bg { position: absolute; top: 0px; left: 0px; width: 100%;
height: 100%; z-index: -1; overflow: hidden; background: rgb(30,30,30);
color: rgb(50,50,50); font-size: 14px; text-align: justify; }
/*EMPTY TRANSLUCENT TABLE CELLS*/
td.trans { filter:alpha(opacity=23); -moz-opacity:0.23; opacity: 0.23; background: rgb(125,125,125); }
/*LINK TRANSLUCENT TABLE CELLS*/
td.parent { filter:alpha(opacity=80); -moz-opacity:.8; opacity: .8; background: rgb(100,100,100); }
*The "background" "a" attributes were omitted for space.
chrishirst posted this at 23:26 — 27th July 2005.
He has: 379 posts
Joined: Apr 2005
#bg is set to be 100% wide and high so it will always resize and as it is absolute positioned, it is not in the document flow so will be the width and height of the browser viewport.
Chris
Indifference will be the downfall of mankind, but who cares?
Venue Capacity Monitoring
Code Samples
nadamt posted this at 08:54 — 28th July 2005.
They have: 18 posts
Joined: Jul 2005
In other words, I can't do it (?).
Anyway, I trimmed my code. Where the previous version had a table over the "head table", "iframe table", and "foot table", this new version uses the colspan attribute to allow the header, iframe, and footer to be in the same table. By fixing the header and footer to a absolute position (i.e. ) and setting the table to a iframe to a relative positioin (), the header and footer will expand and contract with with window (in IE, only the footer expands), but the iframe remains fixed in its position. It seems their is no taming the iframe.
test.htm
Want to join the discussion? Create an account or log in if you already have one. Joining is fast, free and painless! We’ll even whisk you back here when you’ve finished.