JQuery-Mobileのコンテンツ領域ヘッドと足の間の高さは100％

これに関する多くの話題があります。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％を意味..

おかげ

出典

2011-09-16 zyrex

jquery cssを使用しないでください。あなたの頭のために固定小数点オーバーフロー、オート、ボトム：0に設定した独自のフッターが必要です。 – davethecoder

CSS position: fixedは、携帯電話のブラウザでは正しく動作しないのに役立ちます願っています。私の経験はAndroidとiOSのブラウザであり、それらのどれもはposition: fixedを適切には意図していません（例外はiOS 5ブラウザですが、ベータ版です）。

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

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

ただしCSSを使用していますがposition: absoluteを使用する必要がありますまたはあなたが要素の上に高さを設定するためにJavaScriptを使用することができます知ることができます。ここで

は擬似ページ要素の高さを設定するためにJavaScriptを使用してjQueryのモバイルソリューションです：

$(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ページが必要な場合は、アドレスバーの高さをページの高さに追加する必要があります。

出典

2011-09-16 19:33:44 Jasper

現在、少しずつやっていますが、フッターは常に可視領域の下にあります。なぜか分かりますか？ – zyrex

ステータスバーを無視しているようですが、アンドロイドステータスバーの高さを残しておけばそれが正しいと思われます。 – Daniel

@zyrexツールバーのouterHeight（）は、現在の_content_ divの高さに加えて考慮する必要があります。 http://stackoverflow.com/a/21553307/1771795 – Omar

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 -->

あなたは、あなたが、これは常に正しい、何が起こっても、また、この文句を言わないのフラッシュになりますフッタと下部のナビゲーションバーの内側に好きな項目を設定することができますあなたが何かに触れるたびにオフになります。それは

出典

2011-09-16 16:38:14 davethecoder

argにコードを貼り付けます。サファリ（ipad）で作業...あなたはもうスクロールできません、いくつかの助けを知っていますか？ありがとう – zyrex

ありがとう、ジャスパー！それは私をたくさん助けました。

私は、これは複数のヘッダ/フッタで動作するように、と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); 
});

=このスクリプトは、より多くの柔軟性を提供する代わりに、[データ-役割=コンテンツ]の、「.fullHeight」100％の高さを設定されていますが、あなたは自分の[データのロールにfullHeightクラスを追加することができますcontent]要素を含む。

私がまだ抱えている問題の1つは、iosのURLバーを補うことと、デバイス間で動作するウィンドウの高さを見つけることです。その上の任意のアイデア？

出典

2012-02-05 15:05:12 eschwartz

'+ 1'それは魅力のように働いた..ありがとう。あなたは私の日を救った。 – thesummersign

@geekay_gk - ウェブブラウザを使用するとコンテンツの高さも自動的に設定されますか？私の場合、ページ全体にスクロールバーがあり、必要なのはコンテンツの中にフルスクリーンGoogleマップです。それは本当に難しい、私は自分の持っていないときにモバイルアプリを使用して作業しています。 – JetPro

私はAndroidエミュレータで試してみました。それは本当に私の画面の解像度に合っていません。助けて？ – JetPro

JQuery-Mobileのコンテンツ領域ヘッドと足の間の高さは100％

答えて

関連する問題