Html 浮动柱使其高度相同（100%）

因此，我们有3个浮动列

例如：

我想要实现的是A列和C列一样长（高度）（这样我可以匹配背景）

如您所见，我无法使列a占据屏幕的100%（高度）。Body获取视口的100%（高度），但不获取整个文档的100%（高度），因此列a的高度与视口的高度相同

下面是一个真实的例子：

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

谢谢

假设您希望

#a

具有100%的高度，

#b

精确到100px，您可以对

#c

执行以下操作：

---

PS：并非所有浏览器都支持

calc（）

，因此在使用

calc（）

之前，您应该设置一个回退高度值。您可以使用百分比来表示列b，而不是像素。b列为20%，c列为80%，那么它将与a列的100%匹配。如果b列不必精确为100px。

---

使用cal（）时，这里有一个包含支持它的浏览器的页面：

我指的是高度。现在是凌晨2:30，我困了。我编辑了答案。它之所以有效是因为

calc（）

为您计算。不必为

#c

的高度设置特定值，您可以使用

calc（）

函数来计算视口高度的正确结果-100px。太棒了！但我无法将其应用于我的现实世界示例：不要忘记为

#container

设置

float:left

，好的，我在示例页面中添加了所有内容，但它现在看起来很有价值：）如果您的设计允许，或者需要IE8支持，您也可以使用faux列技术，在两列上显示：table cell（您必须为#b和#c创建父div）@FelipeAls Faux列不能在基于%宽度的布局上完成，对吗？对于50%-50%的列，这应该可以工作：

背景位置：中间顶部；

。不确定（X%，100-X%）列是否作为背景位置，而不是0、50（中间）或100%位置“点X%穿过图像，点X%穿过元素”，但我认为这正是所需要的

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;
}

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