html - float 列使它们高度相同 (100%)

Question

所以，我们有 3 个 float 列。

示例:http://jsfiddle.net/A9dqD/

html, body {height: 100%;}
#a {
    float: left;
    height: 100%;
    width: 50%;
    background-color: green;
}
#b {
    float: left;
    height: 100px;
    width: 50%;
    background-color: blue;
}
#c {
    float: left;
    height: 300px;
    width: 50%;
    background-color: red;
}

我想要实现的是 A 列与 C 列一样长(高度)。(这样我就可以匹配背景)。

如您所见，我无法让 a 列占屏幕的 100%(高度)。正文占视口(viewport)的 100%(高度)，但不是整个文档的高度，因此 a 列的高度与视口(viewport)一样长。

这是现实生活中的例子:http://mac.idev.ge:800/wp1/

我不想使用 jquery 手动设置高度。我相信有一个简单的 css 技巧可以做到这一点......我需要你的帮助才能找到它:)

谢谢!

Answer 1

假设您希望 #a 的高度为 100%，而 #b 恰好为 100px，您可以为 #c:

#c { height: calc(100% - 100px); }

jsFiddle

PS:并非所有浏览器都支持 calc()，因此您应该在使用 calc() 之前设置一个回退高度值。