webpage template where content takes full height of viewport if has 1 line minus footer

Question

I am looking for a css based web page template where the main content div takes full height of the view port (minus header and footer heights) when its content has few lines. Footer should be at the bottom of the view port (instead of right below content and instead of showing in middle of viewport). Content area needs to extent vertically to flush with top of footer. Case #1

In all other cases where the content requires more than viewport area, then footer can be at the bottom of the web page (instead of bottom of viewport) as standard web design.

A link to a specific link or sample code appreciated. Don't mention a templates 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|         |   
             |     viewport
             |         |
             |         |
-------------|         |
footer area  |         |
--------------   <-----


all other cases:

--------------   <-----
header area  |         |
-------------|         |
big content  |         |   
             |     viewport
             |         |           
             |         |
             |         |
             |         |
             |    <----      
             |         
-------------|         
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"

http://www.themaninblue.com/writing/perspective/2005/08/29/