html - 如何使用 CSS 创建拉伸(stretch)高度 block

Question

拜托，有人可以帮我处理 CSS(没有 JavaScript)吗？

主 block 可以是任何固定或不固定(其父级的百分比)高度，它不是窗口高度。

<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>

Answer 1

试试display: table 和display: table-row。 我认为 IE7/8 不支持这个。

更新:根据can I use... IE8 支持它，因此使用起来应该相当安全。

http://jsfiddle.net/XyHyg/2/

另一个选择可能是flex但据我所知，它仍处于草稿状态，浏览器支持仍然不是很好。