How to fix this STICKY footer for Android devices in PHONE GAP?

Question

I working in Phone Gap.I have fixed a footer,this works for few devices and does not work for few devices.

HTML CODE for FOOTER

 <div id="footer" style="background-image:url(img/bottom_bar.png);" class="footer">
    <div id="footer_text" class="footer_text">footer</div>
    <div id="info" class="info noSelect"><img src="img/info.png"/></div>
 </div>

CSS for FOOTER

.footer
{
   width:100%;  position:fixed; bottom:0; font-size:11px; color:#FFFFFF; text-align:center; height:30px;
}
.footer_text
{
    text-indent:1%; float:left; text-align:center;  width:75%;  margin-top:2%;
}   

For few devices it sits at the bottom of the screen...inspite of the content overflowing and for few devices it moves along with the content.

EDIT:

As per Filippos Karapetis Sir's advice I have tried implementing iscroll4

I have used this javascript from here

and initialized the scroll

    document.addEventListener("deviceready", onDeviceReady, false);
    function scroll() 
    {
        myScroll = new IScroll('.wrapper', { mouseWheel:true });
    }
    -----
            -----
          function onDeviceReady() 
    {   
        scroll();
                ----
                ----

Footer CSS

.footer
{
   width:100%;  position:fixed; bottom:0; font-size:11px; color:#FFFFFF; text-align:center; height:30px;
}
.footer_text
{
    text-indent:1%; float:left; text-align:center;  width:75%;  margin-top:2%;
}   

The problem is it scrolls only once

Nowadays

Answer 1

Fixed position elements are buggy in some mobile devices. It's a bug/missing feature in their browser. Have a look at this page, which lists compatibility of fixed position elements with several different mobile devices:

https://bradfrost.com/blog/post/fixed-position/

That page also includes solutions based on Javascript to get around this bug in these devices, by overriding the browsers' default scrolling behavior. For example, in jQuery Mobile, fixed elements fade out when the page is scrolled, then fade back in when scrolling ends.

The most direct solution to use for your problem, which also has the smallest footprint (compared to using a full-blown framework), is iScroll 4:

http://cubiq.org/iscroll-4

Here's a small overview, from the iScroll 4 page:

iScroll 4 is a complete rewrite of the original iScroll code. The script development began because mobile webkit (on iPhone, iPad, Android) does not provide a native way to scroll content inside a fixed width/height element. This unfortunate situation prevents any web-app to have a position:absolute header and/or footer and a scrolling central area for contents.

While latest Android revisions are supporting this functionality (although support is not optimal), Apple seems reluctant to add one finger scrolling to divs.

Caressa

So Sir, i seem even this problem here is because of the same problem. YOUR suggestions on this question too. PLEASE. – Nowadays

I understand what you are trying to convey.exactly,this works with android versions 4 and it is not working with android versions of 2. YOU MEAN to say if i use iscroll4. it will be better? Don't I have any other option other than iScroll4? SO THERE IS NO OTHER ALTERNATIVE. – Nowadays

Well, you are trying to create a fixed element (your footer). The way some mobile browsers behave with fixed elements is buggy, and there is not much you can do about this. You can either support only the non-buggy devices, or use a Javascript solution (i.e. iScroll 4 or similar) that has been created for this exact purpose. I'm afraid I don't know of an alternative way to fix this buggy browser behavior without Javascript. The other question you linked to is not relevant to what you're trying to do. – Caressa

The other question too involves scroll and uses the following CSS no-repeat fixed center top. THAT IS WHY I ASKED YOU WHETHER IS IT BECAUSE OF THE MOBILE BROWSERS BEHAVIOR. – Nowadays

Please avoid writing in caps, it indicates SHOUTING, which is annoying. The other question you are making is quite different: in this question, you are trying to position an element in the bottom of the screen. In the other question, you are trying to stretch a background image inside a container, which is an entirely different thing. As @ralph.m answered in the other question, setting your background image to be "no-repeat fixed center top" is broken and it won't work the way you want to in all mobile browsers. You seem not to like the Javascript solution, even if it solves your problem. Why? – Caressa

Sorry Sir.I wanted to highlight my questions.So,I had used caps.Probably I could have done that using bold. Yes Sir,I have a hesitation using iscroll4 and the other thing is i am new to javascript language.I am learning it through the phone gap domain. once I had tried implementing the iscroll4 but wasn't successful. So sort of scary to use it.I had tried using it for the image mentioned in my other question. well,now I seem to have no other option other than that. Sir,well i have another doubt.when i use this iscroll4, what should the css of my footer have positon:fixed or absolute? – Nowadays

Sir,This i scroll isn't helping me out. – Nowadays

You haven't provided any code, so I'm afraid it's impossible to figure out what's wrong without a relevant jsFiddle, where you can show us where the problem is – Caressa

Sir,after the n number of times of scrolling it scrolls just once.should i do any other changes? – Nowadays

I'm sorry, you lost me... what do you mean that it scrolls just once? Can't you scroll the contents again? – Caressa

No sir,its scrolls only once.after that the page becomes static. It scrolls once after great effort – Nowadays

sir you can find my exact code here – Nowadays

thank you Sir..foe helping me figure it out that the CSS position:fixed is not being supported by the lower versions of android and for helping to go about the iscroll. – Nowadays