keep the input box above the android device keyboard while typing

I created one page using HTML5, Bootstrap, CSS and Angular JS specially for Mobile. I tried to keep one form with one input field and one button (for posting message on the page), at footer which is fixed using CSS -

position: fixed;
right: 0;
bottom: 0;
left: 0;
margin-bottom: 0;

and this rules are applied on form's wrapper div.

<div class="navbar navbar-fixed-bottom">
                <div class="navbar-inner">
                    <div class="row">
                        <a class="pull-right switch-venue" target="blank" ng-href="#" href="#">
                            <img alt="Switch Venue" height="25px" src="images/swithc-venue.png"> 
                        </a>
                        <div class="span12 powered-by">
                            Powered by <img alt="" title="" width="70px" src="images/footer_logo.png">
                        </div>
                    </div>
                </div>
            </div>

But here the problem is when I tried to access the page (with web address URL) on my mobile device Samsung Galaxy Y ST5360, and when I try to input some text inside the input text box, android device's keyboard is appearing and behind this the whole footer area (having form with input field and button) is hiding.

While this is working fine on some other Android device Samsung Galaxy S III, it is working fine, means the footer area (with form inside it) is not hiding behind the device keyboard while typing inside input text field.

Sorry, if I couldn't give the more specification about the problem. Please help for this hair pulling problem.

Thanks in advence.