在瀏覽器底部對齊div

Question

請參閱瀏覽器底部的線程： Div

問題圖像： http : //i.imgur.com/I9vVv.png http://i.stack.imgur.com/jTU5U.png

我用了所有方法，一切都白費了。 即使滾動頁面，Jquery中是否有任何方法可將div放在底部？

提前致謝

Answer 1

對於IE6以外的瀏覽器，使用position: fixed ：

#footer {
    position: fixed !important; /* IE6 hack */
    position: absolute;
    right: 0;
    bottom: 0;
    background: yellow;
}

對於IE6，一般的方法是注冊scroll事件並動態更改#footer的top style屬性。

var footer = document.getElementById('footer');

// Test IE6
if (footer.currentStyle && 
    footer.currentStyle.position !== 'fixed') {
    // Set bottom to 'auto' because we would use top property
    footer.style.bottom = 'auto';
    // Only for IE6, so use window.attachEvent
    window.attachEvent(
        'onscroll',
        function() {
            var scrollTop = document.documentElement.scrollTop;
            var pageHeight = document.documentElement.offsetHeight;
            var height = footer.offsetHeight;
            footer.style.top = (scrollTop + pageHeight - height) + 'px';
        }
    );
}