👩🏻‍🤝‍👨🏾 😽 ⛩️ DIY釘付けフッター 👨🏽 🌗 🤸🏻

本格的なサイトページに慣れている人は誰でも、ページのフッターの下部にある「釘付けされた」（粘着性のある）外観を好みます。しかし、インターネットには2つの問題があります。入力フィールドが下がらないことと、（ウィンドウの一番下まで）無敵のフッターです。たとえば、 habrahabr.ru/settings/socialのような短い高さのページを開くと、ビューアーウィンドウの下部にあるように設計された情報がコンテンツに密着し、ウィンドウの中央または上部にあることがすぐにわかります以下が空の場合。

だから

の代わりに

。

初心者タイプセッター向けのこのチュートリアルでは、45分で「釘付け」フッターを作成し、Habrのような尊敬される出版物の欠点を修正して、有望なプロジェクトの実行として競争する方法を示します。

ネットワークから取得した釘付けフッターの1つのタイプの実装を見て、何が起こっているのかを理解してみましょう。 css-tricks.com/snippets/css/sticky-footer

CSS：

* { margin:0; padding:0; } html, body, #wrap { height: 100%; } body > #wrap {height: auto; min-height: 100%;} #main { padding-bottom: 150px; } /* must be same height as the footer */ #footer { position: relative; margin-top: -150px; /* negative value of footer height */ height: 150px; clear:both;} /* CLEAR FIX*/ .clearfix:after {content: "."; display: block; height: 0; clear: both; visibility: hidden;} .clearfix {display: inline-block;} /* Hides from IE-mac \*/ * html .clearfix { height: 1%;} .clearfix {display: block;} /* End hide from IE-mac */

HTML：

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

CSSを知っていて、このコードを見て、原則を理解し、自信を持って複雑なプロジェクトを編集する人はほとんどいません。横への一歩は副作用につながります。以下の推論とフッターの作成は、CSSルールについてより多くの洞察を与えることを目的としています。

理論から始めましょう

釘付けされたフッターの通常の実装は、要素（ BODYの直接の子孫）がHTMLタグで始まるすべての親が同じパーセンテージの高さを持つ場合、ウィンドウに対してパーセンテージの高さ（ 高さ：100％または別）を維持する一意のCSS2プロパティに基づいています。以前は、Doctypeがなく、Quirksモードでは、要素のパーセンテージの高さはどのレベルでもサポートされ、現代のDoctypeではパーセント指定の要素内でのみサポートされていました。したがって、100％の高さを持つコンテンツブロック（ #layoutと呼びましょう）を作成すると、まるでウィンドウのようにスクロールします。フッターとヘッダーを除き、すべての（ストリーミング）コンテンツがそこに配置されます。

フッターはこのブロックの後に配置され、高さ0ピクセルになります。一般に、 #layoutの後に好きなだけブロックを配置できますが、それらはすべて高さ0ピクセルから、またはドキュメントフローの外側（ 位置：静的ではない）でなければなりません。そして、通常使用される別の重要なトリックがあります。高さを0にする必要はありません。高さを固定することもできますが、 margin-bottomプロパティのためにメインユニットからそれを差し引くことができます。- （高さ）; 。

人間の言語では、スタイルによってフッターが埋め込まれる空の「ポケット」が作成され、常にフッターがウィンドウの下部、またはドキュメントがウィンドウの高さよりも高い場合はドキュメントの下部に貼り付けられます。インターネットとHabréには、多くのフッターの実装があり、すべてのブラウザーで異なる成功を収めています。 Habrのレイアウトを「主力馬」として使用して、私たちは引き続き自分で構築していきます。

#layoutブロックの下部はポケットであるため、ページオブジェクトを表示せず、フッター用に空にする必要があります。そして、ここでもう1つの制限があります- #layoutの パディングのために空のポケットを作ることはできません。マージンも保存されません-ネストされた要素のプロパティのために空にする必要があります。さらに、フローティング要素のブロックが境界の下に出ないようにする必要があります。これは、たとえばブロックによって行われます

 <div class="clear"></div>

where .clear {clear：both} この「高さ」を固定するか、同じ相対単位にするか、ページを変更するプロセスで計算することが重要です。通常、このレベリングブロックと必要な高さの設定を組み合わせると便利です。

実験のページの構造を見てみましょう。これを行う最も簡単な方法は、ChromeでFirebugウィンドウまたは同様のウィンドウ（開発者ツール（Ctrl-F12））を開くことです。

 <!DOCTYPE html> <html xml:lang="ru" xmlns="http://www.w3.org/1999/xhtml"> <head> <body> <div id="topline">...  ...</div> <div id="layout"> <div id="header"> <div class="content_left">...=== ===...</div> <div class="sidebar_right">... ...</div> <div class="clear"></div> <!-- --> <div class="rotated_posts">...</div> <div id="footer"> <dl class="user">..<dl><!-- , --> <dl>...<dl> <dl>...<dl> <dl>...<dl> <dl>...</dl> <div class="copyright">...</div> </div> </div> <div id="AutocompleteContainter_ea125"></div> <!--  --> <div class="token-input-dropdown-hubs"></div> <div id="tiptip_holder" style="max-width:300px;"> <div id="jGrowl" class="top-right jGrowl"> </body> </html>

実際の例に移りましょう。

釘付けされたフッターの効果に関するレイアウトの欠点は何ですか？私たちはそれを見る

1）サイトのフッターは、id = layoutのブロック内にあり、パーセンテージの高さはありません。理論的には、彼、両親、およびコンテンツブロック.content-leftは、高さを100％に設定する必要があります。後者では、問題が発生します-彼はこれに適していません。したがって、1つの中間層ブロックが欠落しているか、フッターがそのレベルにありません。また

2）フッターの高さは可変です（リスト内の要素の数とフォントサイズに依存します。これはHTMLではなくCSSで確認できます）。そして

3） #layoutの上に、 90pxの固定高さの広告ユニットがあります。

4）フッター、または（一般的に言えば） #layoutブロックに配置ブロックはありません（ただし、 .rotated_postsブロックの上にありますが、おそらくフッターに起因するはずです）。

ポイント4-スクリプトを描画する必要があります。

追加することで3番目の段落を扱うのは簡単に思えます

 #layout{margin-top:-90px;}

ただし、このブロックはそうではない可能性があることに注意してください-バナーの切り取りによって抑制されているか、広告主が突然表示しないことを決定します。そうでないサイトには多くのページがあります。そのため、広告ユニットへのマージントップの依存は悪い考えです。 #layout内に配置することをお勧めします -何も邪魔しません。

最初のポイントは、釘付けされたフッターが機能するためには、フッターブロックを#layoutの下に配置する必要があるということです。ただし、javascriptを使用すると、他の釘付けされたフッタースキームを実装できますが、いずれの場合も、それを使用しない場合はJSまたは正しいレイアウトが必要です。

コンテンツ内のフッターを「非難」したサイトの最後のレイアウトデザイナーよりも強くなることはできないため、フッターを将来のサイトに正しく配置するというアイデアを延期します（したがって、Habrよりも「クール」になります！）そして、正しいスクリプトにHabrを準備します（ユーザースクリプト）状態。（たとえば、レイアウトデザイナーやスイッチマンではなく、サイトの外観がプロジェクト管理の戦略的な決定を決定します。）したがって、最初の1〜2秒でページが誤ったレイアウトで読み込まれるため、理想を達成することはできません。しかし、私たちにとって、ITの世界で最も人気のあるサイトの品質を凌ぐコンセプトと能力は重要です。

したがって、スクリプトの適切な場所（以前、ページの読み込みの最後）で、広告とフッターのDOMブロックの転送を適切な場所に書き込みます。（ユーザースクリプトのために、ソリューションは純粋より複雑になるという事実に備えます。）

 var dQ = function(q){return document.querySelector(q);} //  var topL = dQ('#topline'), lay = dQ('#layout'), foot = dQ('#footer'); if(topL && lay) // -    lay.insertBefore(topL, lay.firstChild); if(lay && foot && lay.nextSibling) //  lay.parentNode.insertBefore(footer, lay.nextSibling);

ブロックを配置します-必要なプロパティを要素に割り当てるために残ります。フッターの高さを正確に設定する必要があります。これは、ユーザースクリプトがアクティブになる（ページの読み込みが終了する）時点ですでにわかっているためです。前述のように、ユーザースクリプトのトリガーポイントにより、ページ上のフッタージャンプは避けられません。あなたは「良い顔」をしようとすることができますが、「悪いゲーム」で？なんで？サイトの「悪いゲーム」により、余分な労力なしでコンセプトを作成できます。これは、品質を評価するのに十分であり、プロジェクトの「正しいゲーム」では必要ありません。

 if(foot){ //- <div class="clear"></div>   h.apnd_el({clss:'clear', appendTo: footer}); var footH = foot.offsetHeight; //...    } if(topL && lay && footer && lay.nextSibling){ //      ("") h.apnd_el({clss:'clear', css:{height: (footH ||0) +'px'}, appendTo: lay}); lay.style.minHeight ='100%'; h.addRules('#layout{margin-bottom:-'+ footH +'px!important}html, body {height:100%}'); }

ここでは、jQueryとほぼ同じである自己記述関数h.apnd_elの使用を許可しました-

 $('<div class="clear"></div>').css({height: footH ||0}).appendTo($(footer))

そしてさらに-CSSのルールの実装のもう1つの典型的な機能-h.addRules 。ここでは、「 ！重要 」でルールを宣言する必要があるため、これなしでは実行できません-ユーザースクリプトからのスタイルの優先順位の特性のためだけです。

これらのコードを使用すると、ユーザースクリプトに釘付けされたフッターが表示され（ジャンプした後）、ページレイアウトの作成方法を完全に理解できます。ジャンピングデザインを毎日使用するのは不快です。したがって、デモンストレーションとテストのためだけに使用することをお勧めします。 HabrAjax ユーザースクリプトに、バージョン0.883_2012-09-12から始まる「underFooter」設定（設定リストの「footed to the bottom」の前に「checkmark」を設定）で閉じる同様のスクリプトをインストールしました。

釘付けされた足は、インストールされている場合、 ZenCommentスタイルを更新する必要性に影響しますか？ はい、そうです。 ユーザースクリプトによって挿入されたスタイルの優先順位が最も低いスタイルの優先順位の複雑なチェーンのため、釘付けされたフッターを使用できるようにユーザースタイルをわずかに調整する必要がありました。ユーザースタイルを更新しない場合（最大2.66_2012-09-12 +）、フッターは正確に機能しません。

rotate_postブロック（過去の人気のある3つの投稿）はフッターでより論理的に見えるため、実際のスクリプトではフッターにも転送されます。

2番目の項目（レイアウトの欠陥のリストから）は、純粋にHabrの理由です（ユーザースクリプトには適用されず、前のものを部分的に繰り返します）。

ページには、純粋なCSSで釘付けフッターを作成できないという問題があります。フッターの高さは、ブラウザーのデフォルトのフォントサイズによって異なります。 CSSにフッターを実装するには、相対的なフォントの高さを選択する必要がありますが、ユーザーのコンピューターにフォントが提供されていない場合は機能しない場合があります。したがって、ソリューションには、フッターのおよその位置に遷移を一致させることができるjavascriptを含める必要があります。または、異なるプラットフォームのユーザースクリプトで行われた決定の受け入れ可能性を見て、釘付けされたフッターの計算されたインストールを行います-最初の観察は、ソリューションが実用的であることを示しています。

結論：Habréでレイアウトを完全に配置できますが、このためには、レイアウトの動作を明確に理解し、正しい順序でブロックを配置するレイアウトデザイナーが必要です。（フッターとトップバナーは、スタイルに釘付けされたフッターを取得するためだけでなく、「そこにありません」）。フッターの高さを相対的な単位で設定すると、フォントが不確実になります。

実装

HabrAjax 0.883+を有効にすると、「固定フッター」の動作が表示されます。スクリプトを使用して高さを調整します。通常のフッターと比較して、フッターが釘付けされたページがどれだけ優れているかを評価できます。 ZenCommentのユーザースタイルはスクリプトと互換性がありますが、釘付けされたフッターを適切に機能させるには、ZenCommentバージョン2.66_2012-09-12 +をインストールする必要があります。

実装動作の事実

フッター、スタイル、スクリプトを使用したシャーマニズムはシャーマニズムです（理論によってのみ強化されます）。ブラウザによって動作が少し異なりますが、場所によっては-予想外です。ユーザースクリプトとブロックの再配置がなければ、結果は異なります。以下に、ユーザースクリプトでの実装の実験で得たものを示します。

1）Firefox-フッタージャンプの予期しない不足。それらが存在しないのは奇妙です-フッターを下部に配置した後にレンダリングが行われます。

2）Chrome-彼は「さまよえるスクロール」に驚いた-1秒に1回の周期で下の空のスペースがページに追加される-高さの計算で何かがおかしい。 html、body {height：100％}をユーザースタイルで記述することで処理されますが、常に機能するという保証はありません。より信頼できるのは、ドキュメントがウィンドウの高さを超えていないかどうかを確認し、超えていない場合はフッターを移動し、そうでない場合は何もしないことです。ジャンプで-すべてが順調です、そうです。

3）Opera-最初のページの読み込みではジャンプ（v。12.02）はありませんが、急いでリロードするとフッターのジャンプが表示される場合があります。残りはFxと同じくらい正確です。

まあ、Chromeを（スクリプトを使用して）正しく動作するように特別にトレーニングし、この形式でレビュー用にバージョンをロールアウトする必要があります。したがって、ユーザースクリプトのセクションは、記事で説明されているセクションよりも少し複雑です。

これは完全な実装ではないことを思い出してください。たとえば、ユーザーがウィンドウのサイズを変更する場合は考慮されません。また、移動の前後にフッターの高さを変更するという（実際には）まれな組み合わせを見つけることもできます。この場合、不都合が生じることなく、ロジックが失敗し始めます。洗練の複雑さとソリューションの一時性のバランスが尊重されるため、欠陥は意図的に残されました。

その結果、少なくとも高速の固定コンピューターでは、完全に機能する作業スキームであることが判明しました。不正なフッターの動作が検出された場合、「underFooter」設定を無効にする必要があります。

これはどのページに役立ちますか？

ユーザースタイルのない標準サイトでは、短いページの質問と回答でさえ1500pxよりも長くなります。これはほとんどの場合、水平に配置されたモニターでは感知できません。しかし、普通のモニターでも、高さ約1300ピクセルのユーザーの個人ページがよく見られます。そこでは、無敵のフッターが栄光の中で現れます。非常に長くなく、ユーザー設定のページ数。

ZenCommentユーザースタイルを使用すると、必要なページの高さが大幅に削減され、HabrAjaxユーザースクリプトはサイドバーのサイドブロックの一部またはすべてを表示しない場合があります。したがって、スクリプトとスタイルを使用すると、無敵のフッターの効果がより頻繁に観察されます。したがって、HabrAjaxでフッター修正が初めて登場したのは論理的です。しかし、通常のサイトには、釘付けされたフッターが役立つ多くのページがあります。

サポートはありますか？

過去1年間のサイトの動作は、開発者（および管理者）が、以前はユーザースクリプトとユーザースタイルのみに存在していた機能を導入し始めたことを示しています。たとえば、年の初めにHabrの使いやすさに関する記事のレビューを書きました。そこでは多くの小さな願いを集めました。 6か月後、私は彼女に戻って、希望として記述された多くの機能がすでにサイトに実装されていることを満足して（テキストで直接。「UPD」と日付を読むことができます）指摘しました。

次に、コメントを評価するために、正方形ではなく「矢印」を見てください。彼らはユーザーalmalexa （ "Prettifier"）に約3年前に登場し、約2年前にZenCommentに転送されました。約2〜3か月前、サイトに登場しました。 ZenCommentで行われているように、ミスを少なくするために、しばらくすると矢印がある程度の距離に広がると考えられ始めています（数字の左に1つの矢印、右に2番目の矢印）。

したがって、おそらく、Habréの「釘付けされたフッター」は、約3年前に見えたほど素晴らしいものではありません。

過去3か月間に表示されたHabrAjaxスクリプトのその他の機能 （設定で無効になっています）：

* autostat入力フィールド（Operaでは、大きなテキストでは速度が低下する場合があります）;

*「今日」と「昨日」以外の日付の曜日。

*テープ内のイベント、 1行2文字に折りたたみ可能。

*「Habr *」という単語の「χ・」および「χα」への略語。

* 記事番号の日付のヒント-URLの番号によって、記事がダウンロードされる前の月と年が報告されます。

* 「類似の投稿」を2単語に最小化しました。ポップアップ「類似の投稿」のスクリーンショット（4ではなく12のリンクを表示）。

DIY釘付けフッター

理論から始めましょう

実際の例に移りましょう。

実装

実装動作の事実

これはどのページに役立ちますか？

サポートはありますか？

More articles: