用于jquery移动面板的固定页脚

Question

我试图在jquery mobile中的一个面板上放置一个固定的页脚.我尝试了几件事但似乎没什么用.尝试使用数据角色页脚的div,但移动到主页面.然后我创建了另一个页脚div并给它一些css样式,但是将页脚推到面板的底部而不是窗口的底部.我能想到的一个解决方案是滚动事件,它重新计算滚动页脚的高度,但这会给页脚带来非常不稳定的外观.

这是一个包含两个页脚的示例jsfiddle.

HTML:

<div data-role="page" id="myPage1">
<div data-role="header">
     <h1>Page 1 header</h1>
       <a href="#mypanel" class="ui-btn-right" data-icon="gear">Open Panel</a>
</div>
<div data-role="content">
     <h1>Page 1</h1>
     Hi This is the content
</div>
<div data-role="footer">
     <h1>Page 1 Footer</h1>

</div>
<div id="mypanel" data-role="panel" data-position="right" data-display="push" 
data-theme="d" data-swipe-close="true">
    <div id="panelfooter" data-theme="d" data-role="footer"
 data-position="fixed">Footer</div>
    <div id="panelFooter">Footers</div>
    <div data-role="content">hello I am a panel
        <ul>
            <li>Hi</li>
            <li>Hi</li>
            <li>Hi</li>
            <li>Hi</li>
            <li>Hi</li>
            <li>Hi</li>
            <li>Hi</li>
            <li>Hi</li>
            <li>Hi</li>
            <li>Hi</li>
            <li>Hi</li>
            <li>Hi</li>
        </ul>
    </div>
  </div>
</div>

CSS:

#panelFooter {
  position:fixed;
  left:0px;
  bottom:0px;
  height:30px;
  width:100%;
  background:#999;
}

Answer 1

我的建议是更改页脚的代码，如下所示：

<div data-role="footer" data-position="fixed" style="position: absolute">