填充剩余空间 (CSS)答案

【问题标题】：Fill the remainder space (CSS)填充剩余空间 (CSS)
【发布时间】：2013-08-18 19:18:15
【问题描述】：

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

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

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

【问题讨论】：

标签： html css

【解决方案1】：

尝试浮动标题：

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

【讨论】：

非常有创意和简单。喜欢它！

【解决方案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。

[编辑] 将#content 的height 更改为min-height。

【讨论】：

您应该使用min-height: 100% 而不是height 作为#content 元素来修复背景颜色问题。 jsfiddle.net/qolami/cMqTd/4
@HashemQolami，你是对的，我自己也看到了，并修复了它:)
当我将长内容放入内容 div 并将其设置为 overflow-y:auto 时，这会脱胶。