Fixed position on a mobile browser for footer

Question

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. here 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.

Answer 1

另请参阅Google针对此http://code.google.com/mobile/articles/webapp_fixed_ui.html的解决方案

Answer 2

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

Answer 3

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

Answer 4

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 . 。 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.