html - 如何使用 CSS 创建拉伸高度块

Question

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

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

<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 不支持这一点。

更新：根据我可以使用... IE8 支持它，所以它应该是相当安全的使用。

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

另一种选择可能是flex，但 AFAIK 它仍处于草稿状态，浏览器支持仍然不是那么好。

Answer 2

像这样的东西？？

<div class="main" style="height: 1337px;">

  <div class="foo" style="min-height:30%; border:thin black solid">
    This block should be displayed as usual
    (not fixed height)
  </div>

  <div class="bar" style="min-height:40%;border:thin black solid">
    This block should be full height
    (bar = main - foo - foo)
    independently of this content
  </div>

  <div class="foo" style="min-height:30%; border:thin black solid">
    This block should be displayed as usual
    (not fixed height)
  </div>
</div>

Answer 3

如果我理解正确，您所要做的就是：

.bar{
    height:100%;
}

http://jsfiddle.net/3xeu5/1/

Answer 4

定义 bar 的最小高度并从 main 中删除高度。我猜你想要这样的东西

html:

<div class="main">

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

CSS：

.main{
       border:1px solid #000;
        position:relative;
    }
    .foo{
        background:#0000ff;
    }
    .bar{
        background:#00ff00;
        min-height:500px;
    }

工作代码： 演示