Fixed position on a mobile browser for footer

Good day, i have a meta like this

<meta name="viewport" content="initial-scale=1.0, maximum-scale=1.0, user-scalabale=no, width=device-width, height=device-height" />

Now i can get the height view port with js i want to use it to modify my footer so it stays always at the bottom of the screen using either a fixed positioning. he开发者_运维知识库re is the footer css

#footer
{
height:30px;
background-color:#D9D9D9;
background-image:url(../images/footer.png);
background-repeat:repeat-x;
margin-top:20px;
width:100%;
/*bottom:0;
position:fixed;*/
}

how do i modify this footer using JS to get the right thing. Thank you. @cyberomin.

See also Google's solution to this http://code.google.com/mobile/articles/webapp_fixed_ui.html

document.getElementById("footer").style.position = "fixed";

If you by mobile browser mean "mobile safari", you're out of luck, it does not support position fixed.

Related answer: Fixed positioning in Mobile Safari

Edit: This project might be helpful for you -> http://cubiq.org/iscroll

The position:fixed is available since Android 2.2.

However for other devices like IPhone, you must have a solution that simulates the native scroller : this type of solution is available through the JavaScript toolkit Wink. This toolkit allows to make WebApps easily while remaining simple to use (no need to learn an API). Look at the examples on the Scroller component.