Align div in browser bottom

Question

Refer the thread : Div at the browser bottom

Problem image : http://i.imgur.com/I9vVv.png http://i.stack.imgur.com/jTU5U.png

I used all the methods and it all went in wain. Is there any method in Jquery to place a div at the bottom if even the page is scrolled ?

Thanks in Advance

Answer 1

For browsers other than IE6, use position: fixed is enough:

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

For IE6, a general approach is to register the scroll event and dynamically change the top style property of #footer

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';
        }
    );
}