粘性頁腳不粘

鏈接到站點：http://www.bigideaadv.com/xsp 粘性頁腳不粘

我試圖讓頁腳粘住。在Firefox中可以正常工作，而IE和Safari/Chrome則不行。當窗口太小時，頁腳從一個固定的位置切換到一個更加流暢的頁面，該頁面應該位於頁面底部。

如果縮短窗口然後滾動到頁面底部，則展開頁面直到滾動條結束，頁腳位於頁面底部上方約50-100px處。有誰知道爲什麼發生這種情況？

CSS：

html, body { 
        width: 100%; 
        height: 100%; 
    } 

    #wrap { 
     min-height:100% !important; 
    } 

    #wrap:before { /* Opera and IE8 "redraw" bug fix */ 
     content:""; 
     float:left; 
     height:100%; 
     margin-top:-999em; 
    } 

    #container { 
     position: relative; 
     /*margin: 72px 0 172px 0;*/ 
     top: 72px; 
     bottom: 172px; 
     width: 100%; 
     height: auto; 
     overflow: auto; 
    } 

    #top_navigation { 
     position: fixed; 
     min-width: 1010px; 
     width: 100%; 
     height: 72px; 
     background: url('../images/opaque.png') repeat; 
     text-transform: uppercase; 
     z-index: 2000; 
    } 

    #bottom_navigation { 
     position: fixed; 
     min-width: 1550px; 
     width: 100%; 
     height: 172px; 
     background: url('../images/opaque.png') repeat; 
     text-transform: uppercase; 
    }

的Javascript：

int_window_width = $(window).width(); 
    int_window_height = $(window).height(); 

    if ((int_window_width <= int_min_window_width && int_window_height >= int_min_window_height) || int_window_height <= int_min_window_height) { 
     $('html').css('overflow-y', 'scroll'); 
     $('#bottom_navigation').css('bottom', ''); 
     $('#bottom_navigation').css('margin-top', ''); 
     $('#bottom_navigation').css('position', 'relative'); 
    } 

    if ((int_window_width >= int_min_window_width && int_window_height >= int_min_window_height) || int_window_height >= int_min_window_height) { 
     $('html').css('overflow-y', 'hidden'); 
     $('#bottom_navigation').css('position', 'absolute'); 
     $('#bottom_navigation').css('top', ''); 
     $('#bottom_navigation').css('bottom', '0'); 
     $('#bottom_navigation').css('margin-top', ''); 
    }

來源

2012-03-08 Dave Rottino

意思是這樣的嗎？ http://jsfiddle.net/n6NQZ/這個是固定的。您是否想根據頁面滾動將其從固定改爲絕對？ – Jay 2012-03-08 21:03:47

@Jay，你知道你的演示在IE6中不起作用嗎？ – 2012-03-08 21:25:51

這一個也在IE6中工作：http://jsfiddle.net/NDC3L/ – Jay 2012-03-08 21:40:46

如果你想頁腳不要移動文檔滾動時，只需使用position:fixed; bottom: 0。 IE6不支持position:fixed所以你需要應用一個polyfill：http://www.css-101.org/fixed-positioning/05.php

來源

2012-03-08 21:59:12 rybitfa

這是答案不會解決我的問題，但。根據瀏覽器窗口的大小，頁腳需要固定（較大窗口）或絕對底部（較小窗口）。如果關閉窗口高於619px，jquery會正確啓動。如果您滾動到頁面底部，並且頁腳完全定位並且展開窗口，頁腳不會粘住，則會出現此問題。它漂浮在窗口底部以上50-100px。鏈接如下：www.bigideaadv.com/xsp – 2012-03-09 15:57:43

粘性頁腳不粘

回答

相關問題