jQuery モバイル コンテンツの高さを 100% にする方法

jQuery Mobile でコンテンツの高さを 100% に設定する

jQuery Mobile では、コンテンツの高さを 100% に設定するのが難しい場合があります。利用可能なスペース、特にコンテンツとコンテンツの間にスペースがある場合footer.

CSS の実装

次の CSS コードでは、目的の結果を達成するには十分ではない可能性があります:

.ui-content {
  background: transparent url('./images/bg.jpg');
  background-size: 100% 100%;
  min-height: 100%;
  color: #FFFFFF;
  text-shadow: 1px 1px 1px #000000;
}

解決策

拡張されたソリューションでは、ヘッダーとフッターがツールバーが修正されました。その場合、コードは負のマージンを考慮して外側の高さから 1px を減算する必要があります。

jQuery Mobile の場合 >= 1.3:

var screen = $.mobile.getScreenHeight();

var header = $(".ui-header").hasClass("ui-header-fixed") ? $(".ui-header").outerHeight() - 1 : $(".ui-header").outerHeight();

var footer = $(".ui-footer").hasClass("ui-footer-fixed") ? $(".ui-footer").outerHeight() - 1 : $(".ui-footer").outerHeight();

/* content div has padding. Subtract this value if desired. */
var contentCurrent = $(".ui-content").outerHeight() - $(".ui-content").height();

var content = screen - header - footer - contentCurrent;

$(".ui-content").height(content);

jQuery モバイルの場合

var header = $(".ui-header").outerHeight();

var footer = $(".ui-footer").outerHeight();

追加メモ

• ページに固定ツールバーが存在する場合、デスクトップ ブラウザではコンテンツが 1px ずつスクロールします。
• モバイル デバイスでは、本文と .ui-page の高さが原因でページがスクロールしない場合があります設定。

以上がjQuery モバイル コンテンツの高さを 100% にする方法の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。