填充剩余空间（CSS）

Question

我创建了一个jsfiddle：http://jsfiddle.net/cMqTd/1/

我有三个div。父级，标题和内容。标题的高度未知，内容div应填充余数空间。

我试过height: 100%，但这不是我的预期。

Answer 1

尝试浮动标题：

#head {
    background: green;
    float: left;
    width: 100%;
}

Answer 2

浮动标题可以正常工作（不知道为什么对Bryce的答案进行了贬低）。

HTML：

<div id="parent">
    <div id="head">head<br />head<br />head<br /></div>
    <div id="content">content</div>
</div>

CSS：

html, body {
    margin: 0px;
    height: 100%;
}
#parent {
    background: red;
    height: 100%;
}
#head {
    background: green;
    width: 100%;
    float: left;
}
#content {
    background: yellow;
    min-height: 100%;
}

工作JSFiddle。

[编辑] 已将height的{​​{1}}更改为#content。