所以,我们有 3 个 float 列。
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 技巧可以做到这一点......我需要你的帮助才能找到它:)
谢谢!
最佳答案
假设您希望 #a
的高度为 100%,而 #b
恰好为 100px,您可以为 #c
:
#c { height: calc(100% - 100px); }
PS:并非所有浏览器都支持 calc()
,因此您应该在使用 calc()
之前设置一个回退高度值。
关于html - float 列使它们高度相同 (100%),我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/19196139/