Question

i am using

<meta
     name="viewport"
     content="width=100%; 
             initial-scale=1;
             maximum-scale=1;
             minimum-scale=1; 
             user-scalable=no;"
    />

and a <div id="main-footer" style="position:fixed;width:100%;height:40px;">
and a jquery code

 var footerTop = parseInt($(window).height())-40;
            $('#main-footer').css('position','fixed');
            $('#main-footer').css('top',footerTop+'px');

it works fine unless the addressbar is visible (it minimizes the visible height of the page) . so is there any js or css that sets the top of the main-footer div to the [visible-screen-height – 40] ??

thank you

Answer 1

If this div has a fixed position set, can’t you just set a “bottom” value instead of calculating and setting the “top” value?

Set “bottom:0;” instead of calculating the “top” and your footer will be always attached to the bottom of browser’s window.

Check this demo: http://jsfiddle.net/qNSw7/