Phonegap+Android固定头部和底部工具栏的方法

来源：互联网发布：linux 复制全部内容编辑：程序博客网时间：2024/05/17 02:30

方法1、通过CSS代码如下：

<html><head><style>  .TOP_TOOLBAR,  .BOTTOM_TOOLBAR {    height: 50px; width: 100%; position: absolute;  }  .TOP_TOOLBAR {    top: 0;  }  .BOTTOM_TOOLBAR {    bottom: 0;  }  .SCROLLER_FRAME {    width: 100%; position: absolute; top: 50px; bottom: 50px;  }</style></head><body>  <div class=”TOP_TOOLBAR”>    ... toolbar content ...  </div>  <div class=”SCROLLER_FRAME”>    <div class=”SCROLLER”>      ... scrollable content ...    </div>  </div>  <div class=”BOTTOM_TOOLBAR”>    ... toolbar content ...  </div></body></html>

方法2、通过脚本计算屏幕的高度与宽度以及头部工具栏和底部工具栏的高度，确定中间内容区域的高度，代码如下：

function SetHeight() {     var headerH = document.getElementById('index_header').offsetHeight;     var footerH = document.getElementById('index_footer').offsetHeight;     var contentH = 0;     var tUserAgent = navigator.userAgent;     //由於Windows Phone不支援windows.innerHeight語法，改用screen代替     if (tUserAgent.indexOf("Windows Phone") != -1) {         contentH = screen.availHeight - headerH - footerH;     }     else {         contentH = window.innerHeight - headerH - footerH;    }    document.getElementById("index_content").style.height = contentH + "px"; }