CSS 100% height + header with static height;

Question

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?

Answer 1

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.

Answer 2

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>