Make HTML content area fit to viewport height?

Question

I just made this demo extracting out what I'm trying to accomplish:

• Autosize Main Content Area

I want the pink/yellow area to act according to these rules:

• Minimum height is the size of its content (which is variable) IF content size is smaller than viewport size
• Otherwise minimum height is such that it adjusts to fill the window.

Checking out the source to that demo, what am I missing? I feel like this is a pretty easy case that shouldn't require javascript.

Any ideas?

Answer 1

You need to implement the right html/css for a sticky footer to work, look here: http://ryanfait.com/sticky-footer/