填充剩余空间（CSS）

Question

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

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

我试过height: 100%但它不是我所期望的。

Answer 1

尝试浮动头：

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

Answer 2

浮动头正常工作（不知道为什么在布莱斯的答案downvotes）。

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的#content更改为min-height。