javascript - Fixed position on a mobile browser for footer - Stack Overflow

admin管理员组

文章数量:1405871

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.

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.

• javascript
• css
• footer

Share Follow asked Dec 1, 2010 at 12:12 CyberominCyberomin 52322 gold badges88 silver badges2323 bronze badges

Add a ment  | 

4 Answers 4

Sorted by: Reset to default 1

See also Google's solution to this http://code.google./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/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 ponent.

本文标签： javascriptFixed position on a mobile browser for footerStack Overflow