html - 填充剩余空间 (CSS)

Question

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

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

我试过height: 100%了，但这不是我所期望的。

Answer 1

尝试浮动标题：

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

Answer 2

浮动标题工作正常（不知道为什么对布莱斯的回答投反对票）。

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为。#contentmin-height