ページ下部のフッターを修正する方法(複数の方法)

ページ下部のフッターを修正する方法(複数の方法)

フロントエンド Web エンジニアとして、ページ効果を作成するときに次の現象に遭遇したことがあるはずです。HTML ページのコンテンツが少ない場合、Web ページの「フッター」部分が浮き上がってページの中央に配置され、視覚効果に大きな影響を与え、ページの見た目が非常に醜くなります。特に、ワイド スクリーンが増えている現在では、この現象はさらに一般的です。では、Web ページの「フッター」部分をページの下部に永久に固定するにはどうすればよいでしょうか?ここで言っているのは、フッターは常にページの下部に固定されるということであり、常に表示画面の下部に固定されるということではないことに注意してください。つまり、コンテンツが少ない場合は、Web ページがブラウザの下部に表示されます。コンテンツの高さがブラウザの高さを超えると、Web ページのフッター部分がページの下部にあります。つまり、Web ページのフッター部分は常にページの下部にあります。つまり、フッター部分は常に下部に沈んでいます。次の図に示すように:

今日は主に、ページの下部にあるフッターを修正する方法を学びます。
方法 1 <br />まず、Matthew James Taylor 著の「How to keep footers at the bottom of the page」に掲載されている最初の方法を見てみましょう。マシュー・ジェームス・テイラーが紹介した方法を見てみましょう。
HTML マークアップ

コードをコピー
コードは次のとおりです。

<div id="コンテナ">
<div id="header">ヘッダーセクション</div>
<div id="page" class="clearfix">
ページコンテンツ
</div>
<div id="footer">フッ​​ターセクション</div>
</div>

実際、次のように div#page に必要なコンテンツ構造を追加できます。

コードをコピー
コードは次のとおりです。

<div id="コンテナ">
<div id="header">ヘッダーセクション</div>
<div id="page" class="clearfix">
<div id="left">左サイドバー</div>
<div id="content">メインコンテンツ</div>
<div id="right">右サイドバー</div>
</div>
<div id="footer">フッ​​ターセクション</div>
</div>

実際、フッターを常にページの下部に固定するには、div#container がコンテナーである 4 つの div だけが必要です。このコンテナーには、div#header (ヘッダー)、div#page (ページ本体。上記のコードに示すように、この div にさらに div 構造を追加できます)、div#footer (フッター) が含まれます。

CSSコード

コードをコピー
コードは次のとおりです。

html、本文{
マージン: 0;
パディング:0;
高さ: 100%;
}
#容器 {
最小高さ:100%;
高さ: 自動 !重要;
height: 100%; /*IE6 は min-height を認識しません*/
位置: 相対的;
}
#ヘッダー{
背景: #ff0;
パディング: 10px;
}
#ページ {
幅: 960ピクセル;
マージン: 0 自動;
padding-bottom: 60px;/*フッターの高さと同じ*/
}
#フッター{
位置: 絶対;
下部: 0;
幅: 100%;
height: 60px;/*フィートの高さ*/
背景: #6cf;
クリア:両方;
}
/*=======メインコンテンツ=======*/
#左 {
幅: 220ピクセル;
フロート: 左;
右マージン: 20px;
背景:ライム;
}
#コンテンツ {
背景: オレンジ;
フロート: 左;
幅: 480ピクセル;
右マージン: 20px;
}
#右{
背景: 緑;
フロート: 右;
幅: 220ピクセル;
}

このメソッドの実装原理を見てみましょう
1. <html> および <body> タグ: コンテナーの高さをパーセンテージで設定できるように、html および body タグの高さを「100%」に設定する必要があります。同時に、html および body の余白とパディングを削除する必要があります。つまり、html および body の余白とパディングはすべて 0 です。
2.div#container コンテナ: div#container コンテナは、最小の高さ (min-height) を 100% に設定する必要があります。これは主に、コンテンツが少ない (またはまったくない) 場合に 100% の高さを維持できるようにするためです。ただし、min-height は IE6 ではサポートされていないため、IE6 と互換性を持たせるには、min-height に対して互換性処理を実行する必要があります。詳細については、前のコードを参照するか、Min-Height Fast Hack を読んで、IE6 の min-height のバグ問題を解決する方法を確認してください。さらに、絶対配置後に内部の要素が div#container コンテナーから外れないように、div#container コンテナーに「position:relative」を設定する必要もあります。
3.div#page コンテナ: div#page コンテナには重要な設定があります。このコンテナに padding-bottom 値を設定する必要があり、この値はフッター div#footer の高さと同じ (またはわずかに大きい) 必要があります。もちろん、div#page で padding-bottom の代わりに border-bottom と border-width を使用できますが、注意すべき点が 1 つあります。ここで padding-bottom の代わりに margin-bottom を使用しないでください。そうしないと、効果が得られません。
4.div#footer コンテナー: div#footer コンテナーは固定の高さに設定する必要があり、単位は px (または em) にすることができます。 div#footer も絶対位置で配置し、bottom:0 に設定する必要があります。これにより、div#footer が div#container コンテナーの下部に固定されます。これにより、前述の効果が得られます。コンテンツが少ない場合、div#footer は画面の下部に固定されます (div#container が min-height:100% を設定するため)。コンテンツの高さが画面の高さを超えると、div#footer も div#container の下部、つまりページの下部に固定されます。また、div#footer に「width:100%」を追加して、ページ全体に拡張することもできます。
5. その他の div: その他のコンテナーについては、前述の div#header、div#left、div#content、div#right など、必要に応じて設定できます。
アドバンテージ
構造はシンプルで明確です。すべてのブラウザとの互換性を実現するために js やハックは必要なく、iPhone にも適しています。
欠点:
欠点は、div#footer コンテナーに固定の高さを設定する必要があることです。この高さは、必要に応じて設定できます。単位は px または em です。さらに、div#page コンテナーの padding-bottom (または border-bottom-width) を div#footer の高さと同じ (または少し大きい) に設定して、適切に実行する必要があります。
上記は、Matthew James Taylor がフッターを常にページの下部に固定する方法を紹介した方法です。ご興味があれば、原文を読むか、ここをクリックしてデモをご覧ください。
方法2 :
この方法では、フッターの margin-top の負の値を使用して、フッターが常にページの下部に固定される効果を実現します。これをどのように実現するかを詳しく見てみましょう。
HTML マークアップ

コードをコピー
コードは次のとおりです。

<div id="コンテナ">
<div id="page">メインコンテンツ</div>
</div>
<div id="footer">フッ​​ター</div>

上記のコードは最も基本的な HTML コードです。div#footer が div#container 内にある方法 1 とは異なり、div#footer と div#container が兄弟であることもわかります。もちろん、ヘッダー部分を含む 3 列レイアウトなど、必要に応じて div#container コンテナーにコンテンツを追加することもできます。次のコードを参照してください。

コードをコピー
コードは次のとおりです。

<div id="コンテナ">
<div id="header">ヘッダーセクション</div>
<div id="page" class="clearfix">
<div id="left">左サイドバー</div>
<div id="content">メインコンテンツ</div>
<div id="right">右サイドバー</div>
</div>
</div>
<div id="footer">フッ​​ターセクション</div>

CSSコード

コードをコピー
コードは次のとおりです。

html,
体 {
高さ: 100%;
マージン: 0;
パディング: 0;
}
#容器 {
最小高さ: 100%;
高さ: 自動 !重要;
高さ: 100%;
}
#ページ {
padding-bottom: 60px;/*高さはフッターの高さと同じです*/
}
#フッター{
位置: 相対的;
margin-top: -60px;/*フッターの高さと同じ*/
高さ: 60px;
クリア:両方;
背景: #c6f;
}
/*===========その他のdiv============*/
#ヘッダー{
パディング: 10px;
背景:ライム;
}
#左 {
幅: 18%;
フロート: 左;
右マージン: 2%;
背景: オレンジ;
}
#コンテンツ{
幅: 60%;
フロート: 左;
右マージン: 2%;
背景: 緑;
}
#右 {
幅: 18%;
フロート: 左;
背景: 黄色;
}

方法 1 と方法 2 でまったく同じ点がいくつかあります。たとえば、方法 1 のポイント 1 ~ 3 は方法 2 でも同じです。つまり、方法 2 でも、html と body の高さを 100% に設定し、margin と padding を 0 にリセットする必要があります。次に、div#container でも min-height: 100% を設定し、IE6 での min-height の互換性の問題を処理する必要があります。最後に、div#page コンテナーの padding-bottom または border-bottom-width の値を div#footer の高さと同じ (または少し大きい) 値に設定する必要もあります。 2つの方法の違いは次のとおりです
1.div#footer は div#container の外側に配置されているため、2 つは同じレベルにあります。div#container と同じレベルに新しい要素を配置する必要がある場合は、この要素を絶対配置する必要があります。そうしないと、div#container の min-height 値が破壊されます。
2. div#footer の margin-top に負の値を設定します。この値は div#footer の高さと等しく、div#page コンテナーの padding-bottom (または border-bottom-width) 値とも等しくする必要があります。
アドバンテージ:
構造はシンプルで明確であり、js やハックなしですべてのブラウザとの互換性を実現できます。
欠点:
フッターには固定値を設定する必要があるため、フッター部分をその高さに適応させることはできません。
この方法に興味がある場合は、「CSS Sticky Footer」と「Pure Css Sticky Footer」を参照するか、直接「デモ」をクリックしてソース コードを表示することもできます。
方法3 :
フッターを常にページの下部に固定する方法はたくさんありますが、その多くは、何らかのハックや JavaScript の助けを必要とします。次に説明する方法 3 では、15 行のスタイル コードとシンプルで明確な HTML 構造のみを使用して効果を実現し、互換性も高くなっています。他に何も言わずに、まずはコードを見てみましょう。
HTMLコード

コードをコピー
コードは次のとおりです。

<div id="コンテナ">
<div id="page">ここにウェブサイトのコンテンツを入力します。</div>
<div class="push"><!-- コンテンツがありません --></div>
</div>
<div id="footer">フッ​​ターセクション</div>

上記は最も基本的な HTML マークアップです。新しいコンテンツを追加することもできますが、div#container および div#footer コンテナーの外側にコンテンツを追加する場合、新しく追加された要素を絶対配置する必要があることに注意してください。たとえば、ページに必要な要素をdiv#containerに追加することができます。
HTMLコード

コードをコピー
コードは次のとおりです。

<div id="コンテナ">
<div id="header">ヘッダーセクション</div>
<div id="page" class="clearfix">
<div id="left">左サイドバー</div>
<div id="content">メインコンテンツ</div>
<div id="right">適切なコンテンツ</div>
</div>
<div class="push"><!-- ここには何も入れないでください --></div>
</div>
<div id="footer">フッ​​ターセクション</div>

CSSコード

コードをコピー
コードは次のとおりです。

html,
体{
高さ: 100%;
マージン:0;
パディング:0;
}
#容器 {
最小高さ: 100%;
高さ: 自動 !重要;
高さ: 100%;
margin: 0 auto -60px;/*margin-bottomの負の値はフッターの高さに等しい*/
}
。押す、
#フッター{
高さ: 60px;
クリア:両方;
}
/*==========その他の div 効果===========*/
#ヘッダー{
パディング: 10px;
背景:ライム;
}
#左 {
幅: 18%;
フロート: 左;
右マージン: 2%;
背景: オレンジ;
}
#コンテンツ{
幅: 60%;
フロート: 左;
右マージン: 2%;
背景: 緑;
}
#右 {
幅: 18%;
フロート: 左;
背景: 黄色;
}
#フッター{
背景: #f6c;
}

前の 2 つの方法と比較すると、方法 3 は方法 2 に似ています。どちらも div#footer を div#container の外側に配置しますが、この方法では div#container に div.push を追加して div#footer を押し下げます。この方法で、フッターが常にページの下部に固定されるようにする方法を見てみましょう。

1. <html> および <body> タグ: html および body タグは、前の 2 つの方法と同じです。「height:100%」を設定し、「margin」および「padding」を 0 にリセットする必要があります。
2.div#container: 方法 3 の重要な部分は、div#container の設定にあります。まず、その最小の高さ (min-height) を 100% に設定する必要があります。IE6 と互換性を持たせるには、min-height が互換性を持つ必要があります (具体的な処理方法については、前述またはコードを参照してください)。また、ここでもう 1 つ重要なポイントがあります。div#container コンテナーに margin-bottom を設定し、負の値を与える必要があります。この値は、div#footer と div.push の高さに等しくなります。div#footer と div.push に padding と border 値が設定されている場合、div#container の margin-bottom の負の値を、div#footer と div.push の padding と border 値に追加する必要があります。つまり、「div#container{margin-bottom:-[div#footer's height+padding+border] または -[div.push's height+padding+border]}」となります。簡単に言うと、div#container の margin-bottom の負の値は、div#footer および div.push の高さと一致する必要があります (パディングまたは境界線がある場合は、高さの値をそれらに追加する必要があります)。
3.div.push: div.push にはコンテンツを入れないでください。この div は div#container コンテナー内の下部に配置し、その高さの値は div#footer の値と同じに設定する必要があります。フローティングをクリアするには、clear:both を追加するのが最適です。ここでの div.push コンテナの役割は、フッターを下に押し下げることです。
4.div#footer コンテナ: div#footer コンテナは方法 2 と同じです。div#container 内に配置することはできませんが、div#container と同じレベルにあります。要素とフッターの間にスペースを設定する必要がある場合は、マージン値ではなくパディングを使用することをお勧めします。
アドバンテージ:
シンプルで明確、理解しやすく、すべてのブラウザと互換性があります。
欠点:
前の 2 つの方法と比較すると、この方法では追加の div.push コンテナーが使用されます。この方法でもフッター部分の高さが制限され、適応型の高さ効果を実現できません。
方法 3 について詳しく知りたい場合は、ここをクリックするか、デモから直接コードをダウンロードして自分で学習してください。
方法4 :
最初の 3 つの方法では、JavaScript や jQuery の助けを必要とせず、フッターを常にページの下部に固定する効果を実現できます。最初の 3 つの方法では jQuery の助けは使用しませんが、効果を実現するために追加の HTML タグを追加しました。これらの HTML タグを省略すると、効果を実現することが難しくなります。この場合、jQuery または javascript を使用して効果を実現するのが良い方法です。jQuery を使用して、フッターを常にページの下部に固定する効果を実現する 4 番目の方法を見てみましょう。
HTML マークアップ

コードをコピー
コードは次のとおりです。

<div id="header">ヘッダーセクション</div>
<div id="page" class="clearfix">
<div id="left">左サイドバー</div>
<div id="content">メインコンテンツ</div>
<div id="right">適切なコンテンツ</div>
</div>
<div id="footer">フッ​​ターセクション</div>

ここでは無駄な HTML タグは追加していません。この時点では、いつでも本文にコンテンツを追加できますが、div#footer が本文の最後にあることを確認してください。

コードをコピー
コードは次のとおりです。

<div id="footer">フッ​​ターセクション</div>

CSSコード

コードをコピー
コードは次のとおりです。

*{マージン: 0;パディング: 0;}
.clearfix:前、
.clearfix:後{
コンテンツ:"";
表示:テーブル;
}
.clearfix:後{
クリア:両方;
}
.clearfix {
ズーム:1; /* IE <8 */
}
#フッター{
高さ: 60px;
背景: #fc6;
幅: 100%;
}
/*===========その他のdiv============*/
#ヘッダー{
パディング: 10px;
背景:ライム;
}
#左 {
幅: 18%;
フロート: 左;
右マージン: 2%;
背景: オレンジ;
}
#コンテンツ{
幅: 60%;
フロート: 左;
右マージン: 2%;
背景: 緑;
}
#右 {
幅: 18%;
フロート: 左;
背景: 黄色;
}

この方法は、前の 3 つの方法のように効果を実現するために CSS に依存しません。ここでは、通常のスタイル要件に従ってスタイルを記述するだけです。ただし、特に注意する必要があるのは、html、body で高さを 100% に設定できないことです。そうしないと、この方法は正しく機能しません。div#footer で高さを設定し、幅を 100% に設定すれば、間違いはありません。
jQuery コード

コードをコピー
コードは次のとおりです。

<script type="text/javascript">
// ウィンドウの高さが画像に依存する場合に使用されるウィンドウ読み込みイベント
$(window).bind("load", 関数() {
var フッターの高さ = 0,
フッタートップ = 0,
$footer = $("#footer");
ポジションフッター();
//positionFooter関数を定義する
関数positionFooter() {
//div#footerの高さを取得する
フッターの高さ = $footer.height();
//div#footerと画面上部の間の距離
footerTop = ($(window).scrollTop()+$(window).height()-footerHeight)+"px";
/* デバッグ関連
console.log("ドキュメントの高さ: ", $(document.body).height());
console.log("ウィンドウの高さ: ", $(window).height());
console.log("ウィンドウのスクロール: ", $(window).scrollTop());
console.log("フッターの高さ: ", footerHeight);
console.log("フッター上部: ", footerTop);
コンソールログ("------------")
*/
//ページコンテンツの高さが画面の高さより小さい場合、div#footer は画面の下部に絶対配置されます。それ以外の場合は、div#footer は通常の静的配置を維持します。
(($(document.body).height()+footerHeight) < $(window).height()) の場合 {
$footer.css({
位置: 「絶対」
}).stop().animate({
トップ: フッタートップ
});
} それ以外 {
$footer.css({
位置: "静的"
});
}
}
$(window).scroll(positionFooter).resize(positionFooter);
});
</スクリプト>

上記の jQuery コードを使用すると、フッターを常にページの下部に固定することが簡単に実現できます。この方法を使用する場合は、いくつか注意すべき点があります。
1. jQuery バージョン ライブラリが正常にインポートされ、上記の jQuery コードが正常に呼び出されていることを確認します。
2. <div id="footer"> が body の最後であることを確認します。
3. html 本体の高さが 100% に設定されていないことを確認します。
アドバンテージ:
構造がシンプルで、不要なタグは必要なく、すべてのブラウザに対応しており、特別なスタイルを記述する必要もありません。フッターの高さは固定である必要はありません。
欠点:
jsに対応していないブラウザでは正常に表示できず、ブラウザサイズを変更するたびに点滅してしまいます。
今日は主に、Web ページのフッターを常にページの下部に固定する 4 つの方法について説明し、学習しました。ここで明確にしておきたいのは、フッターは常にページの下部に固定され、ブラウザ ウィンドウの下部に固定されるわけではないということです。つまり、ページのメイン コンテンツの高さが表示画面と同じでない場合は、フッターは表示画面の下部に固定されますが、ページ コンテンツの高さが表示画面の高さを超えると、フッターはコンテンツとともに沈みますが、フッターは常にページの下部に固定されます。最初の 3 つは純粋な CSS 実装で、最後の 1 つは jQuery を使用して実装されています。4 つの方法にはそれぞれ長所と短所があります。使用する際は、ニーズに応じて決定できます。この記事が皆様のお役に立てば幸いです。もっと良い方法があれば、ぜひ私と共有してください。よろしければ、直接メッセージを残してください。私はいつもあなたと一緒にこの知識を学び、一緒に議論します。

<<:  HTMLはマウスをホバーしたときにテキストを表示するためにtitle属性を使用します。

>>:  時系列転位修復ケースを実装するSQL

推薦する

Vueライフサイクル機能の詳細な説明

目次ライフサイクル関数一般的なライフサイクルフックVue のインスタンス破棄について:要約するライフ...

Vue の proto ファイルの関数呼び出しのグラフィカルな説明

1. protoをコンパイルするすべての .proto ファイルを保存するために、src フォルダー...

モバイルでのHTML5経由のファイルアップロード

ほとんどの場合、PC でファイルをアップロードするにはプラグインが使用され、フラッシュが導入されても...

MySQL 5.7 共通データ型

——「MySQL in Simple Terms (第 2 版)」からのメモ数値型整数型バイト最小最...

Windows で MySQL のルート パスワードをリセットする方法

今日、WordPress がデータベースに接続できないことがわかりました。ウィンドウ サーバーにログ...

Reactでwindow.print()を使用した際にページが応答しなくなる問題の解決記録について

目次1. 問題の背景: 2. 問題の原因: 3. 問題解決:要約: 1. 問題の背景: window...

MySQLインデックスが失敗するいくつかの状況の分析

1. 最左プレフィックス原則 - 複数の列にインデックスが付けられている場合は、最左プレフィックス原...

高品質なJavaScriptコードの書き方

目次1. 読みやすいコード1. 統一コード形式2. マジックナンバーを削除する3. 単一機能原則2....

フローティング要素が親要素の高さを崩す原因と解決策の詳細な説明

フローティング要素は、親要素の高さを縮小します。要素を float float:left/right...

ウェブフォームデザインのための5つの実用的なヒント

1. フォームテキスト入力のモバイル選択: テキスト入力フィールドにプロンプ​​トが追加されている場...

モバイルレイアウト用の動的REMの実装

ダイナミックレム1. まず、現在の長さの単位を紹介しましょうpx em Mの幅 / 漢字の幅 1em...

Dockerコンテナが停止できない問題の解決方法

解決策は次のとおりです。 1. コンテナを強制削除する docker rm -f ジェンキンス2. ...

実行中のDockerコンテナのポートマッピングを変更する方法

序文docker run がコンテナを作成して実行するときに、-p を使用してポート マッピング ル...

a タグにはテキストと画像があります。テキストを非表示にして画像のみを表示するにはどうすればよいでしょうか?

多くの場合、画像を表示する<a>タグのスタイルに遭遇しますが、タグ内にテキストがあり、そ...

React を使って小さなプログラムを書くための Remax フレームワークのコンパイル プロセス分析 (推奨)

Remax は、実行時に構文制限のないソリューションを採用した React を使用して小規模なプロ...