スティックフッターの使用方法

はじめに

Googleでは、フッターの貼り付けに関する多くの認識を見つけることができます。私はそれらのほとんどを試しましたが、通常はどこかで失敗しました。これは主に、提案された方法が古すぎて新しいブラウザで機能しなかったという事実によるものです。しかし、ソリューションを提供するページはかなり古いため、他の多くのサイトが長い間それらにリンクしているため、Googleの検索結果で依然として非常に高いです。ウェブマスターは検索で一番最初にそれらを見つけ、それから彼らは長い間かぶをかきます、何も新しいものを見ない。

Ryan Faithのソリューションはよく知られており動作しますが、余分な空の<div>が必要です。純粋なHTMLの信奉者は、この冒とく的な意味を理解しないかもしれません。ソリューションに余分な<div>はありません。

ここで紹介するスティッキーフッターは、「リストのフッターを学習する」という記事から得られた情報に基づいているほか、 Cameron Adamsとlwis.netのこの記事によって補足されています。 clearfixハックを使用して、フッターをGoogle Chromeやその他のブラウザーの所定の場所に保持し、ウィンドウのサイズが変更されたときに上部に「ポップアップ」できるようにします。このハックは、floatを使用して2列または3列のレイアウトを作成する場合の問題を回避するのにも役立ちます。 50以上のブラウザーでテストし、うまく機能しています。

HTMLコード

以下は、HTMLコードの最も単純な構造です。おそらく、フッター付きの<div> がラッパー<div>の外側にあることに気づいたでしょう。

< div id ="wrap" > < div id ="main" class ="clearfix" > </ div > </ div > < div id ="footer" > </ div >

ページのコンテンツは<div> 'およびmain内に配置できます。たとえば、2列のレイアウトの場合、コードは次のようになります。

< div id ="wrap" > < div id ="main" class ="clearfix" > < div id ="content" > </ div > < div id ="side" > </ div > </ div > </ div > < div id ="footer" > </ div >

帽子はラップの内側に配置できますが、メインの外側に配置できます

< div id ="wrap" > < div id ="header" > </ div > < div id ="main" class ="clearfix" > </ div > </ div > < div id ="footer" > </ div >

これらのブロックの外側に要素を配置する場合は、絶対配置と100％の高さの計算に煩わされる必要があります。

CSSコード

以下は、フッターを下にプッシュするCSSコードです。

 html、body、＃wrap {height：100％;}

 body> #wrap {height：auto; 最小高さ：100％;}

 #main {padding-bottom：150px;} / *インデントはフッターの高さと等しくする必要があります* /

 #footer {position：relative;
	マージン上部：-150px;  / *負のフッターの高さ* /
	高さ：150px;
	クリア：両方;}

ここでフッターの高さの値は3回使用されます。どこでも同じであることが重要です。 heightプロパティは、折り返し<div>の高さをウィンドウ全体に拡大します。負のフッターインデントは、main- <div> 'aのインデント内に配置します。 mainはラップ内にあるため、インデントの高さは上記の100％の高さにすでに含まれています。したがって、フッターはページの下部に残ります。

しかし、それだけではありません-clearfixプロパティをmain- <div> 'yに割り当てる必要があります。

Clearfixが救助にハック

多くのCSSデザイナーは、すでにClearfixハックに精通しています。フローティング要素に関する多くの問題を解決します。ここでは、Google Chromeでフッターを釘付けするために使用します。また、たとえば、2列のレイアウトでコンテンツが一方向に浮かび、サイドバーが他の方向に浮かぶ場合など、フッターの「出現」に関する問題を軽減します。

したがって、これをスタイルに追加します。

 .clearfix：後{content： "。";
	ディスプレイ：ブロック;
	高さ：0;
	クリア：両方;
	可視性：非表示;}
 .clearfix {display：inline-block;}
 / * IE-macから非表示\ * /
 * html .clearfix {高さ：1％;}
 .clearfix {display：block;}
 / * IE-macからの非表示を終了* /

余分な<div> ''を指定してRyan Faithメソッドを使用する場合でも、複数列のレイアウトにはこのハックを使用する必要があります。

既知の問題

高さとマージン

一部の要素内で垂直インデントを使用する場合、フッターをこれらのインデントの距離まで、たとえばヘッダー内で、またはラップやメインでも押し下げることができます。マージンの代わりに、内部にパディングを使用することをお勧めします。ページにそれほど多くのコンテンツがなく、フッターがウィンドウからはみ出し、垂直スクロールバーが表示されることがあります。余白があるかどうかを確認し、それらをパディングに置き換えます。

メインの<div>を異なる場所にインデントする場合は注意してください。パディングのようなものを追加する場合：0 10px 0 10px ;、注意してください-これは下部のインデントを再定義することができ、厳密に定義する必要があり、コンテンツは長いページのフッターを超えることができます（Google Chrome）。

フォントサイズ

相対的な条件でフォントサイズを設定する場合、ユーザーはフォントサイズを拡大できることに注意してください。一部の要素では、少なくともフッターでも、高さの設定が損なわれ、テキストに十分なスペースがない場合にギャップが生じる可能性があります。絶対値（ptまたはpx）を使用するか、フッターを大きくします。

.NETプラットフォーム

各ページが<form>内にあるASP.netでサイトを開発する場合、高さを追加することを忘れないでください：フォームの場合は、たとえば次のように：

 html、body、form、＃wrap {height：100％;}

翻訳者からのUPD。 紳士の皆さん、いくつかの点を明確にする必要があると思います。

1.これは翻訳トピックです。方法に関するすべての質問とdigりを著者に向けることができます。彼の名前はスティーブハッチャーで、リンクは最初から添付されていました

2. IE-Macについては、Chromeなどでは機能していません。このメソッドがいつ書かれたかはわかりませんが、更新および修正されたほか、ほとんどのブラウザで機能します。「Chromeで動作しない」ということは、このブラウザの初期のビルドのどこかにフッターが浮いていたことを意味する場合があります。では、最新の更新プログラムがある場合はどうでしょうか？この可能性を知らないという理由だけでブラウザを更新しない人、または単にその必要性を認識しない人がいます。この方法はどこでも機能するので、あなたにとっては悪化しますか？まあ本当に？

3. pt vs. em vs. px対％サイトで好きなものを使用します。著者は、プロポーションの分散の問題を解決するための2つの方法を提案しましたが、それらのいずれかを使用することを禁止または強制する人はいません。私たちはここで小さくはなく、何が良いのか、何が悪いのかを知っています。

CSSスティッキーフッター