html - 残りのスペースを埋める (CSS)

Question

jsfiddle を作成しました: http://jsfiddle.net/cMqTd/1/

私は3つの部門を持っています。親、ヘッダー、およびコンテンツ。ヘッダーの高さは不明であり、コンテンツ 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を に変更し#contentましたmin-height。