What I Want
A 25 pixel header and then a flash swf to take up the rest of the screen. The problem I am having is that the 100% height and the 25 pixel header get added together, and I get stuck with the bottom 25 pixels of the flash below the fold.
What I Tried
I tried at least 20 different combinations of divs and nested divs to try to get it to work. Even when I removed the swf and just tried to get the divs to size appropriately, I would always end up with 25 pixels more than I wanted.
What Worked
Eventually, I caved and moved to using tables. Here is the summary in case you need to do this same thing.
html,. body { height: 100% }
<table id="container" border="0" cellpadding="0" cellspacing="0" style="height: 100%; width: 100%;">
<tr style="width: 100%; height:25px"><td>
<div id="headerDiv">
</td></tr>
<tr style="width: 100%; height: 100%"><td>
<div id="flashDiv" style="width: 100%; height: 100%;">
<div id="flashObjDiv"></div>
</div>
</td></tr>
</tbody></table>
If anyone knows how to accomplish the same thing with divs (or a cleaner method in general), I would love to hear it. In the meantime, this will be the solution we go with.
Friday, September 3, 2010
Subscribe to:
Post Comments (Atom)
Thanks, had the same issue.
ReplyDeleteSometimes just a table can help ..