web-dev-qa-db-ja.com

コンテンツの高さを100％jquery mobileに設定

CSSが含まれるjQuery Mobileページを開発しています

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

しかし、ページはこのように表示されます

enter image description here

コンテンツとフッターコンテンツの高さの間の空スペースがフッターまで必要ない

htmlcssjquery-mobile
15
ddw147

更新

以下に Pure CSS Solution を追加しました。

.ui-content divは空のスペースを100％埋めないことに気づきましたが、2pxがまだありません。これらはそれぞれmargin-top: -1pxとmargin-bottom: -1pxを持っているため、 fixed ツールバー header と footer から来ます。 （ フィドル ）

enter image description here

page div と footer の両方が同じ黒data-theme="b"を持っているため、以前は明らかではありませんでした。 .ui-pageのbackground-color: red;を変更して、違いを示しました。

したがって、最良の結果を得るには、 toolbars が修正されているかどうかを確認する必要があります。以下は enhanced ソリューションです。

jQM> = 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);

jQM <= 1.2

JQuery Mobile 1.2以前の fixed ツールバーはtop/bottomに対して-1を取得しないため、ツールバーから1pxを減算する必要はありません。 .outerHeight()。

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

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

デモ-固定ツールバー付き

デモ-固定ツールバーなし （1）

（1） デスクトップブラウザーでは、ページは1ピクセルずつスクロールします。ただし、モバイルデバイスではそうではありません。 bodyの高さが99.9%に設定され、.ui-pageが100%に設定されていることが原因です。

28
Omar

これは、@ Omarの回答にいくつかのポイントを追加するためです。

彼の更新[〜＃〜] fiddle [〜＃〜]

関数内にスケーリングコードを配置し、上部にscroll（0,0）を追加します。これにより、一部のデバイスでの向きの変更（横向き）の際に発生する可能性のある奇妙な問題がなくなります。

function ScaleContentToDevice(){
    scroll(0, 0);
    var content = $.mobile.getScreenHeight() - $(".ui-header").outerHeight() - $(".ui-footer").outerHeight() - $(".ui-content").outerHeight() + $(".ui-content").height();
    $(".ui-content").height(content);
}

次に、この関数をpagecontainershow（jQM 1.3の場合はpageshow）で呼び出し、ウィンドウのサイズ変更とorientationchangeのハンドラーを追加して、ビューポートサイズが変更されたときにコンテンツのサイズを適切に維持する必要があります。

$(document).on( "pagecontainershow", function(){
    ScaleContentToDevice();        
});

$(window).on("resize orientationchange", function(){
    ScaleContentToDevice();
});
15
ezanker

純粋なCSSソリューション

重要な注意：ページまたはページのコンテンツを垂直にスクロールさせたくない特定のページにこのソリューションを使用します。ページのheightが100%に設定されるため、スクロールせず、これに直面することになります 問題 。

  1. フルスクリーン：

    html,
body,
#pageID { /* specify page */
  height: 100%;
  margin: 0;
  padding: 0;
}

#pageID .ui-content {
  padding: 0;
}

.ui-content,
.ui-content #full-height-div { /* divs will inherit page's height */
  height: inherit;
}

    デモ

  1. 固定ツールバー（ヘッダー/フッター）：

    html,
body,
#pageID {
  height: 100%;
  margin: 0;
  padding: 0;
}

#pageID,
#pageID * {
  -webkit-box-sizing: border-box;
     -moz-box-sizing: border-box;
          box-sizing: border-box;
}

#pageID .ui-content {
  height: inherit; /* inherit height without padding nor border */
}

    デモ

  1. フローティングツールバー：

    html,
body,
#pageID {
  height: 100%;
  margin: 0;
  padding: 0;
}

#pageID,
#pageID * {
  -webkit-box-sizing: border-box;
     -moz-box-sizing: border-box;
          box-sizing: border-box;
}

#pageID .ui-content {
  height: calc(100% - 89px); /* 88px = header's height 44px and footer's 44px plus 1px */
}

    デモ

10
Omar

CSSのみで「高さ100％」を達成できます。以下をUIコンテンツセレクターに追加します。

position: absolute;
top: 0;
right: 0;
bottom: 0;
left: 0;

JQuery Mobile v1.4.3でテスト済み

4
nunoarruda

@ezankerの答えを変更します。

動作しますが、2ページある場合、1ページ目から2ページ目に移動すると2ページ目がサイズ変更されます。

イベントpagecontainershowをpagecontainerbeforeshowに変更すると、正しく機能しません。

デバッグする前に、ヘッダーまたはフッターの高さが間違っていることがわかります。

コード

function ScaleContentToDevice(nextPage){
    var screen = $.mobile.getScreenHeight();
    var header = nextPage.children(".ui-header").hasClass("ui-header-fixed") ? nextPage.children(".ui-header").outerHeight() - 1 : nextPage.children(".ui-header").outerHeight();
    var footer = nextPage.children(".ui-footer").hasClass("ui-footer-fixed") ? nextPage.children(".ui-footer").outerHeight() - 1 : nextPage.children(".ui-footer").outerHeight()
    var contentCurrent = nextPage.children(".ui-content").outerHeight() - nextPage.children(".ui-content").height();
    var content = screen - header - footer - contentCurrent;

    nextPage.children(".ui-content").height(content);
}

$(document).on( "pagecontainershow", function(event, ui){
    var nextPage = $(ui.toPage[0]);
    ScaleContentToDevice(nextPage);
});
1
aotian16

純粋なCSSを使用すると、ポートレートページで正常に機能します。ヘッダーとフッターの高さに応じて、上部と下部の位置を設定する必要があります

position: absolute;
top: 88px; /*your header height*/
right: 0;
bottom: 44px; /*your footer height */
left: 0;
background: white;
0
Tripex

簡単な答えは、コンテンツdivのサイズ変更ではなく、アクティブページの背景色を次のように変更することです...

.ui-page-active {background: #f1f1f1; }

... UIコンテンツの色と一致させると、突然問題がなくなります。

0
ppetree