jquery - ページの下部にフッターが表示されないのはなぜですか?

Question

jquery モバイルを使用していますが、問題に直面しています。フッターが下部に表示されません。一番下のフッターを修正したい。

http://jsfiddle.net/ravi1989/xTpfE/

<div data-role="page" id="foo">
    <div data-role="header">
        <h1>Foo</h1>
    </div><!-- /header -->
    <div data-role="content">   
        <p>I'm first in the source order so I'm shown as the page.</p>      
        <p>View internal page called <a href="#bar">bar</a></p> 
    </div><!-- /content -->
    <div data-role="footer">
        <h4>Page Footer</h4>
    </div><!-- /header -->
</div><!-- /page -->

ありがとう

Answer 1

これは、jquery モバイル スタイルによって適用されるデフォルトの相対位置があるためです。そのため、コンテンツの下にのみドロップされます。

画像を追加してフッターに残すには、マークアップを少し変更します。

   <div class="customFooter" data-role="footer">
        <div class="wrapper">
            <img src="http://placehold.it/32x32" />
            <img src="http://placehold.it/32x32" />
        </div>
         <h4>Page Footer</h4>

    </div>

ルールを追加します。

.customFooter {
    position: absolute;
    width: 100%;
    bottom: 0;
    background: #dedede;
}
.customFooter h4 {
    float:right;
}
.customFooter .wrapper {
    position: absolute;
    top: 50%;
    height: 32px;
    margin-top: -16px;
}

デモ

@frequent のコメントに基づいて、data-* を使用してこれを取得できることに気付きました。固定位置にしたい場合は、 を使用できますdata-position="fixed"(ただし、これは絶対配置とは異なります)。

 <div class="customFooter" data-position="fixed" data-role="footer">

そしてあなたのcssは

.customFooter {
    background: #dedede;
}
.customFooter h4 {
    float:right;
}
.customFooter .wrapper {
    position: absolute;
    top: 50%;
    height: 32px; /*height of the image*/
    margin-top: -16px; /*-ve value of half the height*/
}

フィドル

Answer 2

フッターのcssを

position: absolute;
bottom: 10px;