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

Issue

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

Solution

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.

Answered By - Filippos Karapetis