Web-page template where content takes full height of view-port if has 1 line minus footer

Question

I am looking for a CSS-based web page template where the main content div occupies the full height of the view port (minus header and footer heights) when its content has few lines. The footer should be at the bottom of the viewport, rather than right below content, where it's more in the middle of the viewport. Content area needs to expand vertically to be joined with the top of footer.

If the content requires more space than the viewport, then footer can be at the bottom of the web page (instead of the bottom of view-port) as standard web design.

A link to a specific link or sample code appreciated. Don't mention a template site and tell me to do a search there. Must work at least in IE 6 and FF. If JavaScript is required, it's OK as long as if browser doesn't support JS, it defaults to putting the footer at the bottom of the content area without breaking the layout.

Sketch for case #1:

--------------   <-----
header area  |         |
-------------|         |
small content|         |   
             |     view-port
             |         |
             |         |
-------------|         |
footer area  |         |
--------------   <-----


all other cases:

--------------   <-----
header area  |         |
-------------|         |
big content  |         |   
             |     view-port
             |         |           
             |         |
             |         |
             |         |
             |    <----      
             |         
-------------|         
footer area  |         
--------------   

Answer 1

Example here: http://www.rossdmartin.com/aitp/index.htm

More in-depth resources:

• http://www.themaninblue.com/experiment/footerStickAlt/
• http://ryanfait.com/sticky-footer/

Answer 2

Look for "Footer Stick Alt"... there was a long blog write up on how to make this work.

Done by Cameron Adams a.k.a. "The Man in Blue".