I have a CSS problem. There are 3 blocks on a page stacking on each other vertically.
<div class="header"></div>
<div class="content"></div>
<div class="footer"></div>
The first one's height is not defined, can be flexible. The second one must always fill all available height between the first and the last for any window height. The third one has fixed height and always attached to the bottom of a page. I could not find a solution for that. It's not a question of sticky footer, it's a question of stretching the content between header and footer, even on window resize. I need to support IE8+ or at least IE9. I know it can be done with JS, but any working CSS solution is appreciated.
UPDATE:
I know there are lots of similar questions on SO, but they don't address my problem. Solutions with absolutly positioned blocks don't work. For example - http://jsfiddle.net/RkX8B/561/ Solutions with display:table doesn't work as well.
My content block will have lots of text, tables etc. and there must be a scroll bar on that block.
