粘性页脚不粘

链接到站点：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

粘性页脚不粘

回答

相关问题