Question

所以，我们有3个浮动列。

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％（高度）。 Body获取视口的100％（高度）但不获取整个文档，因此 a 列的高度与视口一样长。

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

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

谢谢！

Answer 1

假设您希望#a拥有100％的身高，并且#b恰好是100px，则可以对#c执行以下操作：

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

jsFiddle

PS：并非所有浏览器都支持calc()，因此您应该在使用calc()之前设置后备高度值。

Answer 2

您可以使用colb的百分比而不是像素。 col b为20％，col c为80％，然后它将匹配col的100％。如果col b不必精确为100px。使用cal（），这是一个包含支持它的浏览器的页面：http://caniuse.com/calc

浮动柱使它们的高度相同（100％）

2 个答案: