views:

2062

answers:

2

I am building a layout which includes a header, which is 40 px in height. Underneath this header a SWF resides that should take up the rest of the available space.

The best solution untill now has been working with a table, giving the first row 40px height and the second row a 100% height - but these rows still add up in Internet Explorer, resulting in a scrollbar appearing for 40 extra pixels - which should not be the case.

I tried using this: http://www.456bereastreet.com/archive/200609/css_frames_v2_fullheight/ - it works fine if you have content that pushes down eventually but with a SWF with 100% in it, it will take over the whole page, or half the page (depending on putting the SWF in the content div or the SWF being the content div).

Before I resort to javascript to take care of this business I am wondering if someone else knows a better solution?

+1  A: 

Try setting your header as static. So it floats over the main body, and set the main body to 100% height. Then give the body a 40px padding on the top.

Nick Berardi
that sorta works, had to add wmode="transparent" to my swfobject to keep showing the header, but now my SWF still sticks all the way up to the top of the page if both header and swf position are set to absolute. When set to relative the same old happens.
Kasper
This would have worked with a normal page - but not with the setup with the SWF, i resorted to javascript. Thanks anyway
Kasper
A: 

A similar solution to forcing a footer to the bottom of a page might work

    html, body{height:100%;margin:0;padding:0;}
    #head{height:40px;background:blue;}
    #wrapper{min-height: 100%;height: auto !important;height: 100%; margin: 0 auto -40px;background:red;}
    #content{}

<div id="wrapper">
<div id="head">
</div>
<div id="content">
</div>
</div>
wheresrhys