如何填充剩余高度的100%？

+--------------------+
|                    |
|                    |
|                    |
|                    |
|         1          |
|                    |
|                    |
|                    |
|                    |
+--------------------+
|                    |
|                    |
|                    |
|                    |
|         2          |
|                    |
|                    |
|                    |
|                    |
+--------------------+

上图(1)的内容是未知的，因为它可能在动态生成的页面中增加或减少。如上所示的第二个 div (2) 应填充剩余空间。

这是我的 html 的示例

<div id="full">
<!--contents of 1 -->
<div id="someid">
<!--contents of 2 -->
</div>
</div>

css...

#full{width: 300px; background-color: red;}
#someid{height: 100%;}

或者说这个方法是错误的？我该怎么做？ 请看我的demo http://jsfiddle.net/Y7PhV/99/并告诉我我的错误。

如果你添加一个 div (#header如下）来包装 1 的内容。

1. 如果你漂浮#header，内容来自#someid将被迫绕其流动。

2. 接下来，你设置#header的宽度为 100%。这将使其扩展以填充包含的 div 的宽度，#full。这将有效推动所有#someid的内容如下#header因为两侧不再有空间流动。

3. 最后，设置#someid的高度为 100%，这将使其高度与#full.

JSFiddle http://jsfiddle.net/G9cSZ/2/

HTML

<div id="full">
    <div id="header">Contents of 1</div>
    <div id="someid">Contents of 2</div>
</div>

CSS

html, body, #full, #someid {
  height: 100%;
}

#header {
  float: left;
  width: 100%;
}

Update

我认为值得一提的是，当今现代浏览器都很好地支持 Flexbox。 CSS 可以更改为#full成为一个弹性容器，并且#someid应该将其弹性增长设置为大于0.

html, body, #full {
  height: 100%;
}

#full {
  display: flex;
  flex-direction: column;
}

#someid {
  flex-grow: 1;
}