CSSスティッキーフッターを機能させることができません。何が間違っていますか？

StackOverflow https://stackoverflow.com/questions/159487

  •  03-07-2019
  •  | 
  •  

質問

まあ、これはここでの私の最初の投稿で、サイトを本当に楽しんでいます。

私は非常に基本的な（罪のようにugい）サイトを立ち上げましたが、何らかの理由でCSSスティッキーフッターをFireFoxで動作させることができません。 IEは動作しますが、FFはページの途中まで表示します。

URLは http://dev.aipoker.co.uk

です。

FFで開発し、IEでバグを修正する必要があることを知っているので、実際に間違いを犯した可能性があり、IEでは他のどこでも機能しません。

誰かが私の不幸から私を追い出すのを手伝ってくれますか？

ありがとう、みんなとギャル。

役に立ちましたか？

解決

これを one で試してください。Firefoxで正常に動作します。

ところで、Boagworldのポッドキャストをまだ聞いていないなら、聞いてください。すばらしい！ ：）

乾杯。

他のヒント

このようなコードで成功しました：

footer { 
  display: block; 
  position: absolute; 
  width: 100%; 
  bottom: 0px; 
}

これを行うために確認できる最小限の変更は次のとおりです。

  • フッターを移動する体の内側のセクション
  • bodyとfooterSectionの両方で絶対位置を設定します
  • footerSectionでbottom = 0pxに設定

最終的には次のようになります：

<style type="text/css">
  #body, #footerSection { position: absolute; }
  #footerSection { bottom: 0px; }
</style>

<div id="body">
   ...
   <div id="footerSection">
      ...
   </div>
</div>

これは CSSのみのスティッキーフッター＆amp;について知っておく必要があるすべてです。スティッキーナビゲーション：

ページの下部に貼り付ける

Position: absolute;
top:auto;
bottom: 0;

画面の下部に貼り付ける

Position: fixed;
top:auto;
bottom:0;

すべての問題。おそらく、HTMLコードを配置した場所（フッターをコンテンツラッパーに貼り付けない限り、フッターを子要素にしないでください）、またはCSSが重なっているためです。

同じテクニックをスティッキーナビゲーションに適用するには、自動＆amp;上。モバイルを含む（IE7以上のメモリから）クロスブラウザ互換です。

ライセンス： CC-BY-SA と 帰属
所属していません StackOverflow
scroll top