没有卷轴的全高度列

我在这个网站上工作的时刻：http://weloveprivacy.com/我试图让内容（＃容器）从顶部（.top-wrap）伸展到页脚（。页脚），而没有得到不必要的滚动。我希望列（.front1，.front2，.front3）始终具有相同的高度并填充屏幕，以便边界从顶部延伸到页脚。没有卷轴的全高度列

这是纯粹的CSS可能吗？

来源

2012-02-06 Cody

你可否在这个问题上加上相关的代码，这样对未来的人可能会有同样的问题有用吗？ – KatieK 2012-02-06 18:46:53

看起来@Jawad在[你之前的问题]之后为你发布了[同样的问题]（http://stackoverflow.com/q/9159026/422184）（http://stackoverflow.com/q/9119726/422184）。我的解决方案应该也适合你（看看它是如何实际上是同一个问题）。 – Ktash 2012-02-06 19:36:44

嗯，那很有趣。添加以下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。我建议使用条件语句将该样式提供给破解的版本，并让他们在没有列向下的情况下查看它。

来源

2012-02-06 16:48:19 0b10011

谢谢！真棒，它可以用CSS来完成！ :) – Cody 2012-02-07 08:36:29

添加以下的CSS特性的#container：

float: left; 
width: 100%;

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

width: 33%;

删除宽度：318px从FRONT1，FRONT2 ，前3列。现在列将延伸到屏幕的整个宽度，每列将是相等的宽度（占总宽度的33％）。

来源

2012-02-06 12:48:22 Ninja

谢谢，但我想要的不是全宽，而是全高:) – Cody 2012-02-06 12:50:21

但是，它已经在你已经给出的网站全高 - 它从topwrap完全延伸到页脚 - 你究竟看着什么？ – Ninja 2012-02-06 13:05:00

必须是因为你有一个小屏幕分辨率，我已经从列中删除了图像，所以你应该能够看到它不会伸展 – Cody 2012-02-06 13:11:46

至少在你想的方式中，你试图做的事对纯CSS来说是不可能的。但是，你可以做的是假冒faux columns。这个想法是，你用一个包含元素包装你的三列，然后将一个背景图像应用到垂直平铺的元素。这可能会造成等高柱的错觉。

由于需要编辑图像以进行更改，所以维护起来有点痛苦，但它很可靠。

来源

2012-02-06 14:18:10 chipcullen

好的，谢谢！是人造的列将无法正常工作，因为我想使用边框。我必须尝试用java脚本实现它:) – Cody 2012-02-06 14:20:37

没有卷轴的全高度列

回答

相关问题