刪除封面圖片和大尺寸屏幕上的粘滯頁腳之間的白色間距

Question

以下是我正在開發的頁面的鏈接http://ansh-test.bitballoon.com/。 這個網站已經建立了Bootstrap 3.

在這個鏈接的主頁上我有一個標題，然後是一個帶有過濾器覆蓋和最後一個頁腳的封面圖片。我已經能夠將頁腳功能設置爲sticky footer。然而，在更大的屏幕上，當我增加瀏覽器的高度時，在封面圖像和粘性頁腳之間會出現令人討厭的白色補丁。

1. 我想覆蓋圖像溢出（如果那是正確的術語說不上）使用CSS達到高達粘性頁腳的點，使得存在之間沒有可見白斑。

2. 我還想控制和定義粘頁腳應該在頁面上顯示的瀏覽器高度。

有人可以幫我弄清楚我上面分享的鏈接嗎？

謝謝！

Answer 1

我將.bg-filter div設置爲min-height: 100vh;，並將其設置爲始終佔用屏幕高度的100％。您可以使用媒體查詢對此值進行微調，以便考慮導航和頁腳高度並消除滾動的需要。視口單位被廣泛接受，所以我不會太擔心瀏覽器支持，除非你需要IE8（http://caniuse.com/#feat=viewport-units）。對於第二個問題，如果我理解正確，則需要使用一些js代碼設置窗口滾動事件來確定它應該出現的時間。

Answer 2

#content-wrap{ min-height:100%;} 
@media (min-width: 1200px){ 

html , body{ height:100%;} 
.bg-centerTop70 { height: 100vh; } 

} 

上面提到的CSS將指導您接受您的結果。