8250 BlackBerryデバイスでCSSのスティッキーフッタが機能しない

ページの下部に貼り付けるために取り組んでいたモバイルサイトにフッターが必要でした。私はCSS Sticky Footer example by Ryan Faitを見つけて実装しました。おそらくテストできるすべてのブラウザで、フッターが底にうまく収まることがわかりました。8250 BlackBerryデバイスでCSSのスティッキーフッタが機能しない

そして、それが起こった。クライアントはフッターがどこにでも投げ込まれていると不平を言った。辛いことに詳細を要求したところ、問題はBlackBerryモバイルデバイスの1つのモデル、つまり8250モデルでのみ発生していました。私はWindows VMを取り出し、BlackBerry 8250シミュレータをダウンロードしてインストールしましたが、確かに、私は問題を見ました。

ページが2つのBlackBerry画面の高さの場合、フッターは最初の画面の中央に貼り付けられます。スクロールするとフッタは移動せず、ページの下半分までスクロールするとフッタは表示されません。トップ画面の中央に固定されたままです。

この質問の最後にHTMLとCSSを掲載します。なぜこれが8250 BlackBerryモデルで起こっているのか、そしてそれがどのように修正できるかについての指針や手がかりを得ることができたら、私は非常に感謝しています。

ありがとうございました！

<html xmlns="http://www.w3.org/1999/xhtml"> 
    <head> 
     <meta http-equiv="content-type" content="text/html; charset=UTF-8" /> 
     <meta name="viewport" content="width=320; initial-scale=1.0; maximum-scale=1.0; user-scalable=yes;"/> 
     <style type="text/css"> 
      * { margin: 0; padding: 0; } 
      html { height: 100%; } 
      body { height: 100%; } 
      .page { 
       width: 100%; 
       min-height: 100%; 
       height: auto !important; 
       height: 100%; 
       margin: 0 auto -4em; 
      } 
      .push { 
       height: 4em; 
      } 
      #footer { 
       clear: both; 
       position: relative; 
       z-index: 10; 
       height: 4em; 
       margin-top: -4em; 
       text-align: center; 
      } 
     </style> 
    </head> 
    <body> 
     <div class="page"> 
      <!-- lots of other DIVs here for actual content --> 
      <div class="push"></div> 
     </div> 
     <div id="footer"> 
      <!-- footer content over here --> 
     </div> 
    </body> 
</html>

私はこれを見つけましたjQuery Sticky Footerハック。私はこれが人々が私が一緒に行かなければならないと示唆しているものになるかどうかについてもあまり確信していません。私はまだそれをテストしていない。

アップデート：これは、上にリンクされているjQuery Sticky Footerハックを試してみた小さなアップデートです。上記のBlackBerryデバイスでは機能しませんでした。

出典

2010-12-11 ayaz

'float'ingは何もないので、' clear：both; 'は必要ありません。私はなぜあなたが 'position：relative;'を使うのか理解していません。 – Shikiryu

2つの異なることを試した後、私はCSSStickyFooterソリューションにつまずいた。私はそれを実装し、問題のBlack Berryデバイスと、それをテストした残りのものと一緒にうまく動作することがわかりました。

<html xmlns="http://www.w3.org/1999/xhtml"> 
    <head> 
     <meta http-equiv="content-type" content="text/html; charset=UTF-8" /> 
     <meta name="viewport" content="width=320; initial-scale=1.0; maximum-scale=1.0; user-scalable=yes;"/> 
     <title>Another CSS Sticky Footer that works on Black Berry</title> 
     <style type="text/css"> 
      * { 
       margin: 0; 
       padding: 0; 
      } 

      html { 
       height: 100%; 
      } 

      body { 
       height: 100%; 
      } 

      .page { 
       width: 100%; 
       min-height: 100%; 
      } 

      .push { 
       padding-bottom: 4em; 
       overflow: auto; 
      } 

      #footer { 
       position: relative; 
       margin-top: -4em; 
       height: 4em; 
       clear: both; 

       background-color: red; 
      } 
     </style> 
    </head> 

    <body> 
     <div class="page"> 
      <div id="content"> 
       <p>Some body content will come here</p> 
       <p>And over here as well.</p> 
      </div> 
      <div class="push"></div> 
     </div> 
     <div id="footer"> 
      <p>This is the footer block.</p> 
     </div> 
    </body> 
</html>

出典

2010-12-14 17:54:08 ayaz

8250 BlackBerryデバイスでCSSのスティッキーフッタが機能しない

答えて

関連する問題