スティッキーフッターは、サイトへの

Question

のリンクを貼り付けていません。 Firefoxではうまく動作しますが、IEやSafari/Chromeでは動作しません。ウィンドウが小さくなりすぎると、フッターは固定された位置からページの下部に置かれるより流動的なものに切り替わります。

ウィンドウを短くしてページの一番下までスクロールし、スクロールバーが終了するまでページを展開すると、フッターはページの下部の約50〜100ピクセル上に位置します。誰がなぜこれが起こるのか知っていますか？

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を使用しています。 IE6はposition:fixedをサポートしていませんので、ポリフィルを適用する必要があります：http://www.css-101.org/fixed-positioning/05.php