5

jquery モバイルのパネルに固定フッターを配置しようとしています。いくつか試してみましたが、何もうまくいかないようです。data-role フッターで aa div を試してみましたが、それはメイン ページに移動します。次に、別のフッター div を作成し、css スタイルを設定しましたが、フッターがウィンドウの下部ではなく、パネルの下部にプッシュされます。私が考えることができる 1 つの解決策は、スクロール時にフッターの高さを再計算するスクロール イベントですが、それはフッターに非常にぎくしゃくした外観を与えます。

以下は、両方のフッターを含む 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;
}
4

3 に答える 3

-1

同様の要件があり、data-position:fixed 属性を使用してそれを管理しました。ここにjsfiddleがあります：

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

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

于 2014-12-14T20:18:56.143 に答える
-1

私の提案は、フッターのコードを次のように変更することです。

<div data-role="footer" data-position="fixed" style="position: absolute">
于 2014-03-11T15:22:34.307 に答える