jQuery Mobile でコンテンツの高さを正確に計算してヘッダーとフッターの間のスペースを埋めるにはどうすればよいですか?

jQuery Mobile を使用した Web ページのコンテンツの高さ計算の強化

jQuery Mobile Web ページのヘッダーとフッターの間のスペースを効果的に埋めるには、コンテンツの高さを正確に計算することが重要です。これを実現するには、固定ツールバーの影響を考慮する必要があり、わずかなギャップが残る可能性があります。

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 of 1em = 16px (32px top+bottom). This step
   can be skipped by subtracting 32px from content var directly. */
var contentCurrent = $(".ui-content").outerHeight() - $(".ui-content").height();

var content = screen - header - footer - contentCurrent;

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

jQuery Mobile のソリューション

バージョン 1.2 以下の固定ツールバーでは 1px のマージンが導入されないため、計算が簡素化されます:

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

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

フル解像度

コンテンツ div の周囲のパディングを考慮するには、コンテンツ変数を直接調整するか、 contentCurrent 変数からのパディング値 (32px)。さらに、固定ツールバーが存在する場合は、outerHeight() の測定値から 1px を削除します。

以上がjQuery Mobile でコンテンツの高さを正確に計算してヘッダーとフッターの間のスペースを埋めるにはどうすればよいですか?の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。