0

拜托，有人可以帮我处理 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>
4

4 回答 4

2

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

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

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

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

于 2013-10-05T10:18:57.647 回答
0

像这样的东西？？

<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>
于 2013-10-05T09:51:35.990 回答
0

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

.bar{
    height:100%;
}

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

于 2013-10-05T10:08:34.490 回答
0

定义 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;
    }

工作代码： 演示

于 2013-10-05T10:21:04.920 回答