I’ve been asked this question a few times in the last couple of months, so I thought I would put together an example page to show how you can get Flash content to stretch to 100 percent height and width without using tables.
View example: 100% width and height stretched Flash embed.
It’s actually pretty simple. Here’s some of the CSS I used:
/* hide from ie5 mac \*/
html {
height: 100%;
overflow: hidden;
}
#flashcontent {
height: 100%;
}
/* end hide */
body {
height: 100%;
margin: 0;
padding: 0;
background-color: #eee;
}
Setting the html tag to 100% height and then placing the Flash movie inside a div that is also set to 100% height does the trick.
Notice the overflow: hidden on the html element since IE will show the scrollbar even if the page doesn’t need to scroll. This line will force IE to hide any content that is outside of the browser window, and therefore hide the scrollbar as well.
To embed the Flash movie, I used my FlashObject Javascript embed so the page will validate and I have access to all the various Flash parameters I might need to pass to the Flash movie.
UPDATE (01-05-2005): Someone pointed out a bug with this in IE 5 on Macintosh, so I’ve updated the CSS a bit to make it work. Current verified working browsers are: IE 6 (PC), IE 5 (Mac), Safari, Firefox (PC, Mac), Mozilla (PC, Mac), Opera 7.54 (Mac).
If you have other browsers available for testing I would love to know if this displays properly or not. I’m mainly interested in IE 5 and 5.5 on a PC.
UPDATE (1-17-05): Tested in IE 5.01 sp2 and IE 5.5 sp2 on a pc today, and it works great.
Pingback: Xychtopedia Brutallica - XHTML kompatibilnà definice Flash objektu
You’ve got some wonderful write-up’s here. This one, as with the JS embedding, are excellent and things i’ve been keen on learning about. Consider yourself bookmarked! Keep it up!
Geoff – I’ve been checking your site lately and it’s nice to see that you’re getting to work on fun stuff and that the block is pushing so hard in the right direction these days. Most folks resist adoption of doing things right. Props.
Flashobject.html shows walker.swf just fine under IE 5.5 on a PC running Win98 SE with service pack 3 (An old Sony Vaio laptop, actually, so the IE is “customized,” whatever that means. Mainly, it seems to mean that it runs slower than molasses.) Firefox 1.0 on the same system runs it about twice as fast.
Flashobject.js is truly a great bit of code. I’m using it on a new home page that has animated aliens. (I write science fiction.) I’d originally wanted to have a series of animations that would play in sequence, after starting at a random one. Apparently, this is simply Not Done. I can’t believe it. My javascript abilities are nowhere near being able to code that, but it seems like something a lot of people might find useful.
Maybe it’s something you’d consider posting as (yet another) public service?
Thanks… the FlashObject stuff is posted here.
Geoff, speaking of flash, you’d be proud of me today, after about four years, I’ve created and called my first function!!!
I thought this program was just for animating ;)
Hey Geoff, you can get older stand alone IE versions at http://www.skyzyx.com/downloads/ if you want to test :)
Heh, I actually spent this morning setting up IE 5 and IE 5.5 for another project on a test PC at the office. So I checked this on those, and it works great on both.
So this is probably a noob question, I wouldn’t claim otherwise. I assume that between this and the flashobject.js, there’s a way to display the movie without the outside-the-edges, artboard overflow stuff, right? Problem is, now that I can’t use the Dreamweaver tools to modify the Flash content, I’m kinda lost on where to start. I’ve searched through script and can’t tell where the switch might be.
Can anyone point me in the right direction? Thanks
I’m not sure what you mean about the ‘outside-the-edges artboard overflow.’
Do you mean the area outside of the stage when you are in the Flash authoring environment? There’s really no way to restrict the display of that since users can make their browsers whatever size they want – really long and short, or tall and skinny, which will usually allow them to see past the edges of the stage. You do have some control over the scaling of the Flash movie by using the
noscaleparameter, and you can make the stage appear to be larger than it really is by extending your objects out past the edges of the stage.Pingback: Xychtopedia Brutallica
So this is probably a noob question, I wouldn’t claim otherwise. I assume that between this and the flashobject.js, there’s a way to display the movie without the outside-the-edges, artboard overflow stuff, right? Problem is, now that I can’t use the Dreamweaver tools to modify the Flash content, I’m kinda lost on where to start. I’ve searched through script and can’t tell where the switch might be.
Quick fix would to just draw blank boxes over the out side of the stage. That way any content that falls off the stage would be hidden under this ‘mask’
If you are talking about hiding flash content that is outside of the stage area, then yes, you can just cover it with something inside the Flash movie, or mask your content.