0

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

示例：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列一样长（高度）。（所以我可以匹配背景）。

如您所见，我无法使列占据屏幕的 100%（高度）。正文获得视口的 100%（高度），但不是整个文档，因此列a的高度与视口一样长。

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

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

谢谢！

4

2 回答 2

2

假设你想要#a100% 的高度，并且#b正好是 100px，你可以为#c:

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

jsFiddle

PS：不是所有的浏览器都支持calc()，所以你应该在使用之前设置一个后备高度值calc()。

于 2013-10-05T09:30:20.713 回答
0

您可以为 col b 使用百分比而不是像素。col b 是 20%，col c 是 80%，那么它将匹配 col a 的 100%。如果 col b 不必完全是 100px。使用 cal() 这是一个带有支持它的浏览器的页面：http: //caniuse.com/calc

于 2013-10-05T10:53:24.660 回答