Q:

How to create stretch height block with CSS

Please, can someone help me with CSS (without JavaScript)?
The main block can be any fixed or not fixed (percent of it's parent) height, it's not window height.
<div class="main" style="height: 1337px;">

  <div class="foo">
    This block should be displayed as usual
    (not fixed height)
  </div>

  <div class="bar">
    This block should be full height
    (bar = main - foo - foo)
    independently of this content
  </div>

  <div class="foo">
    This block should be displayed as usual
    (not fixed height)
  </div>
</div>

A:

Try display: table and display: table-row. I think IE7/8 don't have support for this though.
Update: according to can I use... IE8 has support for it so it should be fairly safe to use.
http://jsfiddle.net/XyHyg/2/
The other choice is probably flex but AFAIK it's still in draft state and browser support still isn't so great.

