container resize to window

[clarkvan]

I'm sure this has been asked before but I can't seem to find it anywhere. I want to have my container always take up 100% height of the browser window minus 20 pixels on the top and bottom and 960 pixels wide.

Green= container

Red = logo, menus, submenus designed to fit in 1024 x 768

pink = expands outside the window within an iframe with a scroll bar.

Top (monitor A) is what it will look like at 1024 x 768. Bottom (monitor B) is a bigger monitor example.

The white space at the top and bottom outside of the green container should stay the same through all browser window sizes. The problem is how to get the green container to resize to the window size even when the content (pink) goes farther down.

How do I keep the green container the full browser height minus 20 pixels at the top and bottom?

Does this make sense?

Thanks!

[absolutmgd13]

try adding:
html{height:100%;}
body{height:100%;}

then set your container to {height:100%;min-height:100%;}

and add whatever padding you'd like.. that should do the trick, if not its close!