全高柱无滚动

Question

我正在这个网站上工作：http://weloveprivacy.com/我试图让内容（#container）从顶部（.top-wrap）伸展到页脚（.footer） ），没有得到不必要的滚动。我希望列（.front1，.front2，.front3）始终具有相同的高度并填充屏幕，因此边框从顶部延伸到页脚。

这可以用纯CSS吗？

Answer 1

嗯，这很有趣。添加以下CSS：

.nav {
 left:0;
}
#wrapper {
 overflow:hidden;
}
#container {
 height:auto !important;
 min-height:100%;
 margin:0 auto;
 padding:0;
}
#container > div {
 margin-bottom:-10000px;
 padding-bottom:10000px;
}
.footer {
 margin-top:-97px;
 position:relative;
}

查看jsFiddle Example以查看其实际效果。

注意： margin-bottom / padding-bottom黑客将破坏旧版本的IE。我建议使用条件语句为破坏的版本提供该样式，并让它们在没有列向下延伸的情况下看到它。

Answer 2

将以下css属性添加到#container：

float: left;
width: 100%;

将以下属性添加到.front1，.front2，.front 3：

width: 33%;

从front1，front2，front 3移除宽度：318px。现在，列将延伸到屏幕的整个宽度，每列的宽度相等（占总宽度的33％）。

Answer 3

至少以你的思维方式，纯粹的CSS无法实现你想做的事情。但是，你可以用faux columns之类的东西伪造它。我们的想法是用包含元素包裹三列，然后将背景图像应用于垂直平铺的元素。这可能会产生等高柱的错觉。

维护起来有点痛苦，因为您需要编辑图像以进行更改，但它是可靠的。