1

私は JQuery Mobile アプリを持っていますが、独自の複雑なフッター div がページの下部にあり (位置: 固定)、JQM によって制御されていません (data-role="footer" ではありません)。代わりに独自の div セクションにあるため、アプリ全体に対して 1 つしかありません)

問題は、このフッターが十分に長い場合、コンテンツの最後の数行を覆い隠してしまうことです。

解決策は、フッターのサイズのパディングを何らかの形で追加して、スクロールバーが正しく機能してコンテンツの最後の行を表示することだと思います。

したがって、この例では、n 行の長さのコンテンツがあります。一番下までスクロールすると、このファイルの最後の行がフッターの上に表示されます。代わりに、最後の数行はフッターに覆われているため、表示されません。

欲望：

 - - - - - - - - - - - - - - - - - - -
|                                     |
|    Header                           |
|                                     |
 - - - - - - - - - - - - - - - - - - - 
Content Line n-3
Content Line n-2
Content Line n-1
Content Line n
 - - - - - - - - - - - - - - - - - - - 
|                                      |
|  Footer                              |

しかし、私は得ています

 - - - - - - - - - - - - - - - - - - -
|                                     |
|    Header                           |
|                                     |
 - - - - - - - - - - - - - - - - - - - 
Content Line n-6
Content Line n-5
Content Line n-4
Content Line n-3
 - - - - - - - - - - - - - - - - - - - 
|                                      |
|  Footer                              |

アップデート：

回答のおかげで、正しい軌道に乗ることができました。

以下を .css ファイルに追加しました。

.ui-content
{
    margin-bottom: 251px; /* The height of the footer */
}

これに関する問題は、フッターの高さが変更された場合 (異なるフォント、または行が追加された場合)、これが自動的に更新されないことです。これを修正するためにJavascriptを実行できると思います。

更新 2:

以下を実装して動的にしました。

.bind('pageinit', function () {
    $(".ui-content").css('margin-bottom', $('#footer').height());
})
4

1 に答える 1

0

あなたのフッターはコンテンツの上のレイヤーにあると思いますので、お互いに特別なスペースを作ることはできません。そのため、コンテンツの最後にフッターの形をしたフィラーを配置することをお勧めします。これは、MrOBrianが言ったように、コンテンツをに配置したり<div margin-bottom=footer height>、を使用<br />したり、フッターの形をし<div>たり、他の多くのオプションを作成したりすることで実現できます。

于 2012-07-13T21:49:01.570 に答える