web-dev-qa-db-ja.com

jQuery-Mobileコンテンツ領域の頭と足の間の高さ100％

これに関する多くのトピック...しかし、それを行う方法の要点はわかりません。

JQMヘッダーとフッターがあります。コンテンツ領域が頭と足の間の100％の高さになるようにしたい。

それは私のコードです、それはどのように可能ですか？

<body>
        <div data-role="page" id="entryPage" data-theme="d">

        <div data-role="header" id="header" data-position="fixed" data-theme="d">
            <h1>Page Title</h1>
        </div><!-- /header -->

        <div data-role="content" id="content" data-theme="d">

             <div id="columnwrapper">
                <div id="leftcolumn">
                    <div class="innertube">
                        Point 1
                    </div>
                    <div class="innertube">
                        Point 1
                    </div>
                </div>
            </div>

            <div id="rightcolumn">
                <div class="innertube">
                    <div id="switch1">
                        test
                    </div>
                </div>
                <div class="innertube">
                    test2
                </div>

            </div>

            <div id="contentcolumn">
                <div class="innertube">Content</div>
                <div class="innertube">Content</div>
            </div>

        </div><!-- /content -->
        <div data-role="footer"  id="footer" data-position="fixed" data-theme="d">

            <div id="switch2">
                <a href="#foo" data-role="button" data-icon="arrow-u">Expand main menu</a>
            </div>

        </div><!-- /footer -->
    </div><!-- /page -->
</body>

CSS：

#columnwrapper{
    float: left;
    width: 100%;
    margin-left: -75%; /*Set left margin to -(contentcolumnWidth)*/
    background-color: #C8FC98;

}

#leftcolumn{
    margin: 0 40px 0 75%; /*Set margin to 0 (rightcolumnWidth) 0 (contentcolumnWidth)*/
    background: #C8FC98;
}

#rightcolumn{
    float: left;
    width: 40px; /*Width of right column*/
    margin-left: -40px; /*Set left margin to -(RightColumnWidth)*/
    background: yellowgreen;
}

#contentcolumn{
    float: left;
    width: 75%; /*Width of content column*/
    background-color: blue;
}

.innertube{
    margin: 0px; /*Margins for inner DIV inside each column (to provide padding)*/
    margin-top: 0;

}

実際には、内側の領域はコンテンツに応じて高さを満たすだけです...つまり、2 divで2行になりますが、100％ではありません。

ありがとう

headerjquery-mobileheightfooter
18
dotchuZ

CSS position: fixedは、モバイルブラウザでは正しく機能しません。私の経験はAndroidおよびiOSブラウザーであり、それらはどれもposition: fixedを適切にインプリメントしません（例外はiOS 5ブラウザーですが、まだベータ版です）。

要素を画面に固定し、ユーザーがモバイルブラウザーでスクロールしたときに要素を移動しないのではなく、position: absoluteのように扱われ、ページがスクロールしたときに要素が移動する傾向があります。

また、CSS overflowプロパティを使用すると、ほとんどのモバイルデバイスでスクロールできません（iOSではサポートされていますが、ユーザーはscrollable-divでスクロールするときに2本の指を使用する必要があります）。

ただし、CSSは使用できますが、position: absoluteを使用する必要があるか、JavaScriptを使用して要素の高さを設定できることに注意してください。

JavaScriptを使用して疑似ページ要素の高さを設定するjQuery Mobileソリューションを次に示します。

$(document).delegate('#page_name', 'pageshow', function () {
    var the_height = ($(window).height() - $(this).find('[data-role="header"]').height() - $(this).find('[data-role="footer"]').height());
    $(this).height($(window).height()).find('[data-role="content"]').height(the_height);
});

完璧な仕上がりを得るには、ターゲットデバイスのアドレスバーの動作を考慮する必要があります。フルスクリーンのWebページが必要な場合は、アドレスバーの高さをページの高さに追加する必要があるためです。

10
Jasper

ありがとう、ジャスパー！それは私を大いに助けました。

これを複数のヘッダー/フッターで機能させ、iOSのURLバーを考慮に入れるには、多くのことをいじくり回す必要がありました。私はこの問題を抱えている他の人のために私の解決策を共有すると思いました。これはこれまでのところiOSシミュレーターで機能していますが、他のデバイスでどのように機能するか知りたいと思っています。

/* detect device */
var ua = navigator.userAgent,
    iphone = ~ua.indexOf('iPhone') || ~ua.indexOf('iPod'),
    ipad = ~ua.indexOf('iPad'),
    ios = iphone || ipad,
    Android = ~ua.indexOf('Android');


$(document).delegate('#the_page', 'pageshow', function () {
    var $page = $(this),
        $target = $(this).find('.fullHeight'),
        t_padding = parseInt($target.css('padding-top'))
                    + parseInt($target.css('padding-bottom')),
        w_height = (ios)? screen.height-65: $(window).height();     // "-65" is to compensate for url bar. Any better ideas?
        headFootHeight = 0;

    // Get total height for all headers and footers on page
    $page.find('[data-role="footer"], [data-role="header"]').each(function() {
        var myTotalHeight = $(this).height()
                            + parseInt( $(this).css('padding-top') )
                            + parseInt( $(this).css('padding-bottom') );
        headFootHeight += myTotalHeight;
    });

    var the_height = (w_height - headFootHeight);           

    $page
     .height(w_height)
     .find('.fullHeight')
     .height(the_height - t_padding);
});

このスクリプトでは、[data-role = content]ではなく、「。fullHeight」に100％の高さを設定して柔軟性を高めていますが、fullHeightクラスを[data-role = content]要素に追加するだけです。

私がまだ抱えている問題の1つは、iOSでURLバーを補正することと、デバイス間で機能するウィンドウの高さを見つけることです。その上で何かアイデアはありますか？

3
eschwartz

cSS：

footer {
            display: block;
            position: fixed;
            left: 0;
            bottom: 0;
            right: 0;
            height: 50px;
            background-color: #333;
            overflow: hidden;
            z-index:1000;
            -webkit-transform: translateZ(0);
            opacity:.9;
        }

    header{
        display:block;
        position: fixed;
        left:0;
        right:0;
        top:0;
        height:50px;
        overflow: hidden;
    }

    section{
        display:block;
        position:fixed;
        left:0;
        top:50px;
        bottom:50px;
        right:0;
        overflow-y: auto;
    }

    nav{
        display:block;
        height:100%;
        -webkit-backface-visibility: hidden;
    }

    .body{
        overflow-y: hidden;
    }
    .bar {
border: 1px solid       #2A2A2A;
background:             #111111;
color:                  #ffffff;
font-weight: bold;
text-shadow: 0 -1px 1px #000000;
background-image: -webkit-gradient(linear, left top, left bottom, from(#3c3c3c), to(#111)); /* Saf4+, Chrome */
background-image: -webkit-linear-gradient(top, #3c3c3c, #111); /* Chrome 10+, Saf5.1+ */
background-image:    -moz-linear-gradient(top, #3c3c3c, #111); /* FF3.6 */
background-image:     -ms-linear-gradient(top, #3c3c3c, #111); /* IE10 */
background-image:      -o-linear-gradient(top, #3c3c3c, #111); /* Opera 11.10+ */
background-image:         linear-gradient(top, #3c3c3c, #111);
  }

必要な唯一のhtml：

  <header class="bar" id="AllHead"></header>

  <div data-role="content" class="content" id="home"><section><nav></nav></section></div><!-- /content -->

  <footer class="bar" id="allFoot"></footer>

 </div><!-- /page -->

次に、フッター内の必要なアイテムを設定できます。下部のナビゲーションバーは、何が起こっても常に正しく表示されます。また、何かに触れるたびに点滅することもありません。それが役に立てば幸い

1
davethecoder