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

Question

I am trying to place a fixed footer on a panel in jquery mobile. I have tried a couple of things but nothing seems to work. Tried aa div with data-role footer but that moves to the main page. Then I created another footer div and gave it some css styling but that pushes the footer to the bottom of the panel and not at the bottom of the window. One solution I can think of is a scroll event which recalculates the height of the footer on scroll but that would give a very jerky appearance to the footer.

Here is a sample jsfiddle with both the footers.

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

another try:

 #mypanelfooter { position:absolute; left:0px; bottom:3px; height:auto; width:90%; padding:5%; border:none; background-color:blue; } 

 <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="mypanelfooter"> Footer </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><li>Hi</li><li>Hi</li><li>Hi</li><li>Hi</li><li>Hi</li> <li>Hi</li> </ul> </div> </div> </div> 

if your Content in the Panel isn't to big it works...

Answer 2

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

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

Answer 3

I had a similar requirement, and I managed it by using data-position:fixed attribute. Here is the jsfiddle:

<div data-role="footer" data-position="fixed">
<h4>My Footer</h4>
</div>

http://jsfiddle.net/Lu80dt6c/3/