I've got a div that I want to position at the bottom of the mobile browser (Safari + Android) viewport. Currently my div is fixed at the bottom on all the top 5 browsers on Windows (IE, FF, Saf, Chrome, Opera), but that's "the browser window", not "the viewport".

On mobile devices (I've only tried on Samsung Galaxy Tab with Android 2.2 so far) the div appears at the bottom of the page, but if you pinch/punch to zoom in, the fixed div doesn't follow. It stays behind, outside of the viewport.

I'm specifically using the position:fixed and bottom:0 CSS properties to maintain the position, and as I said, it works fine on a non-touch browser.

Am I going to have to resort to keeping the div in the position I'd like it to be (at the bottom of the viewport) by hooking into the touchmove event and looking at (a) the zoom level, (b) the viewport position, and (c) the scroll position?

I'm using JavaScript to inject the div into the page rather than using inline CSS. The good thing is that I don't have to worry about quirks mode (as I'm only targeting Webkit browsers), so that's one positive thing.

I can't set doctype, use inline CSS or inline DIVs. Everything has to be added dynamically via JavaScript. Here's what I've done in my test so far:

var mydiv=document.createElement("div");
mydiv.style.position="fixed";
mydiv.style.bottom="0px";
mydiv.id="floater";
mydiv.style.width="400px";
mydiv.style.height="50px";
mydiv.style.backgroundColor="yellow";
if(document.body)document.body.appendChild(mydiv);
document.getElementById("floater").innerHTML="HELLO";

I've got a div that I want to position at the bottom of the mobile browser (Safari + Android) viewport. Currently my div is fixed at the bottom on all the top 5 browsers on Windows (IE, FF, Saf, Chrome, Opera), but that's "the browser window", not "the viewport".

On mobile devices (I've only tried on Samsung Galaxy Tab with Android 2.2 so far) the div appears at the bottom of the page, but if you pinch/punch to zoom in, the fixed div doesn't follow. It stays behind, outside of the viewport.

I'm specifically using the position:fixed and bottom:0 CSS properties to maintain the position, and as I said, it works fine on a non-touch browser.

Am I going to have to resort to keeping the div in the position I'd like it to be (at the bottom of the viewport) by hooking into the touchmove event and looking at (a) the zoom level, (b) the viewport position, and (c) the scroll position?

I'm using JavaScript to inject the div into the page rather than using inline CSS. The good thing is that I don't have to worry about quirks mode (as I'm only targeting Webkit browsers), so that's one positive thing.

I can't set doctype, use inline CSS or inline DIVs. Everything has to be added dynamically via JavaScript. Here's what I've done in my test so far:

var mydiv=document.createElement("div");
mydiv.style.position="fixed";
mydiv.style.bottom="0px";
mydiv.id="floater";
mydiv.style.width="400px";
mydiv.style.height="50px";
mydiv.style.backgroundColor="yellow";
if(document.body)document.body.appendChild(mydiv);
document.getElementById("floater").innerHTML="HELLO";

• javascript
• css
• touch

Share Improve this question Follow asked May 9, 2011 at 19:41 Dee2000Dee2000 1,64122 gold badges1818 silver badges2121 bronze badges 3

• May be worthwhile looking at jQuery Mobile or jQTouch and seeing how they keep the tool-bars fixed. You also use @media to apply different CSS based on the client's settings viewing the screen. – Brad Christie Commented May 9, 2011 at 21:34
• Thanks Brad on the two jQ~ tips, I'm looking into them. What do you mean by "@media" though? – Dee2000 Commented May 10, 2011 at 6:29
• What Brad is referring to is Media Queries: smashingmagazine./2010/07/19/… Definitely worth looking in to! – Dan Commented May 17, 2011 at 0:25

Add a ment  | 

2 Answers 2

Sorted by: Reset to default 3

Your position:fixed won't work on mobile webkit browsers. Take a look at the mobile webkit fixed position problem on http://www.position-absolute./. They have a few ways of keeping something at the bottom.

Check out iScroll:
http://cubiq/iscroll-4

It seems to be one of the better options out there - definitely worth looking into.

I have used the previous version of iScroll but unfortunately there were a few things that didn't work to standard so we had to scrap the idea. However, the guys at Cubiq have just released v4 of iScroll which promises to fix a lot of the things that were issues in the previous version.

Best of luck!
Dan