jquery 移动面板的固定页脚

Posted 2023-05-08

【中文标题】jquery 移动面板的固定页脚

【英文标题】：Fixed footer for a jquery mobile Panel

【发布时间】：2013-09-19 18:10:01

【问题描述】：

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

Here 是一个带有两个页脚的示例 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;

【参考方案1】：

再试一次：

#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>

如果您在面板中的内容不是很大，它可以工作...

【参考方案2】：

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

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

【讨论】：

这会破坏固定页脚。

如果代码构造正确，这不会破坏任何东西。你能告诉我“损坏”页脚的例子吗？

【参考方案3】：

我有类似的要求，我通过使用 data-position:fixed 属性来管理它。这是jsfiddle：

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

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

【讨论】：

问题是关于面板页脚，而不是页脚。