粘頁腳不粘

Question

鏈接到網站： 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', '');
    }

Answer 1

如果您希望在滾動文檔時頁腳不移動，則只需使用position:fixed; bottom: 0 position:fixed; bottom: 0 。 IE6不支持position:fixed因此您需要應用polyfill： http : //www.css-101.org/fixed-positioning/05.php