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.

score 1 · Answer 1 · answered Dec 31 '10 at 05:14

1

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

answered Dec 31 '10 at 05:14

Alex Nolasco

18,750
9
86
81

score 0 · Accepted Answer · answered Dec 01 '10 at 12:14

0

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

answered Dec 01 '10 at 12:14

Greg

21,235
17
84
107

yes this does not work, i want to use the view port's height to fix the footer, any tip. – Cyberomin Dec 01 '10 at 12:18
@Cyberomin, .style.bottom = "0px"; – Greg Dec 16 '10 at 13:37

score 0 · Answer 3 · edited May 23 '17 at 12:11

0

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

edited May 23 '17 at 12:11

Community

1
1

answered Dec 01 '10 at 13:06

Daniel

4,918
4
33
34

score 0 · Answer 4 · answered Jan 14 '11 at 13:57

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.

Fixed position on a mobile browser for footer

4 Answers4