沒有卷軸的全高度列

我在這個網站上工作的時刻：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

沒有卷軸的全高度列

回答

相關問題