我正在用 HTML5、CSS3 和 Javascript 开发智能手机应用程序。我正在使用 phoneGap 和 PhoneGap Build 创建本机代码。问题是页面看起来不错，直到用户需要输入文本。键盘打开并将页脚向上推到覆盖文本框下方输入按钮的文本框中。
<footer>
<ul class="flink">
<li><a href="link1.html" class="first active"><img src="images/link1.png"/><span class="ftext">Link 1</span></a></li>
<li><a href="Link2.html" class="first active"><img src="images/link2.png"/><span class="ftext">Link 2</span></a></li>
<li><a href="Link3.html" class="first active"><img src="images/link3.png"/><span class="ftext">Link 3</span></a></li>
<li><a href="Link4.html" class="first active"><img src="images/link4.png"/><span class="ftext">Link 4</span></a></li>
<li><a href="Link5.html" class="first active"><img src="images/link5.png"/><span class="ftext">Link 5</span></a></li>
</footer>
CSS：
footer { position:fixed; bottom:0; width:100%; display:inline-block;background:#000; }
footer ul { margin:0px; width:100%; float:left;}
footer ul li { margin:0px; width:20%; .width:auto;display:inline; float:left; text-align:center; height:auto;}
footer ul li a { margin:0px; width:100%; float:left; height:auto; font:normal 11px Verdana, Geneva, sans-serif; padding:10px 1px; background:#000; color:#fff; text-decoration:none;}
footer ul li a.first { margin-right:1%; width:99%;}
footer ul li a img { width:30px; height:30px;}
footer ul li a .ftext { display:block; margin-top:1px;}
footer ul li a:hover {background: rgb(75,75,75);