フッターをページ下部に固定するCSS実践チュートリアル-CSSチュートリアル-php.cn

ホームページ

ウェブフロントエンド

CSSチュートリアル

フッターをページ下部に固定するCSS実践チュートリアル

高洛峰

Mar 10, 2017 am 11:05 AM

css フッター

この記事では、ページ下部のフッターを修正する実際の CSS の実践を主に紹介します。CSS のクリアの問題に注意してください。必要な場合は、Web ページの

フッターの位置の問題

フッターを参照してください。、通常、ここにヘルプリンクと著作権情報が配置されます。フッターは当然ページの下部に配置されるべきですが、一般的な慣例によれば、フッターより前の Web ページのコンテンツが比較的小さい場合、または垂直解像度が高いモニターを使用している場合、フッターは表示されないことがあります。ページ下部の状況は以下の通りです。

フッターは基本的に Web サイトのすべてのページに共通の部分であり、ページごとにコンテンツの量が異なるため、一部のページに十分なコンテンツがない可能性があり、この問題が発生する可能性があります。さらに、特に背景色を含むフッターの場合、この問題は外観に重大な影響を与えます。

そのため、ページ上のコンテンツの量に関係なく、フッターを正確に下部に配置する必要があります。

フッターを一番下に固定する方法絶対配置は可能ですか？

おそらく誰かがフッターをposition:fixedに設定して一番下に配置することを考えたことがあるでしょう。この属性値をサポートしていない IE6 に関わらず、事実上、Web ページの内容自体が十分であれば、この書き方では最初からブラウザの下部にフッターが表示され、スクロールするとフッターが表示されます。 Web ページでは、フッターは元の位置のままブラウザの下部に表示されます。この効果は明らかにほとんどの Web サイトには適していません。

ご想像のとおり、必要な効果は次のとおりです:

Web ページに多くのコンテンツがある場合、一番下までスクロールしても一番下のフッターのみが表示されます。

Web ページのコンテンツが小さい場合、フッターはページ全体の下部に配置され、残りは空白のままになります。

従来のシンプルな実装方法

CSS Sticky Footer は、フッターを下部に固定する合理的な実装方法を提供します。ただし、これは英語のサイトであり、その記述方法はまだ改善の余地があるため、この記事ではその内容を参照し、合理的な実装方法を示します。

まず、このような HTML 構造が必要です。

<body>  
    <p class="wrapper">  
        <!--网页内容-->  
        <p class="footer_placeholder"></p>  
    </p>  
    <p class="footer">  
        <!--页脚-->  
    </p>  
</body>

ログイン後にコピー

p.wrapper は、フッターを除く Web ページ内のすべてのコンテンツの外部コンテナーであり、フッター p.footer はそれと同じレベルにあります。 p.footer_placeholder は、Web ページ上のすべてのコンテンツの最後、つまり p.wrapper の最後の子要素として配置する必要があります。その機能については後で説明します。

次にCSSを書いて順番に説明していきます。

html, body{height:100%;}

ログイン後にコピー

Webページの内容が不足している場合、実際のbodyやhtmlの高さはブラウザの表示範囲より小さくなる場合がありますので、bodyやhtmlの高さを100%で記述してください。さらに、次の直接の子要素でもパーセント書き込みメソッドが使用されます。パーセント書き込みメソッドは、直接の親要素に特定の高さの定義がある場合にのみ有効である必要があります。

.wrapper{   
    min-height:100%;   
    _height:100%;   
    margin-bottom:-120px;   /*假定页脚的高度为120px*/  
}

ログイン後にコピー

すべての Web コンテンツは、最小の高さを定義するこの p.wrapper 内にあります (IE6 はハックを使用します)。この要素の親要素は、コンテンツの量に関係なく、100% の高さを定義する本体です。、p.wrapper 要素の高さは、ブラウザーの表示範囲全体を占めます。次に、フッターがページコンテンツの最後に正確に表示されるように、フッターの高さに応じて下マージンに等しい負の値を設定します。

.footer, .footer_placeholder{height:120px;}    /*假定页脚的高度为120px*/

ログイン後にコピー

p.footer_placeholder、文字通り、フッターのプレースホルダー要素です。これは単なる空の p で、定義の高さはフッターと同じで、フッターのための場所を残すために存在します。これがないとこんなことが起こるかも知れません↓

フッターをページ下部に固定するCSS実践チュートリアル

この時点で、下部に固定されたフッターが実装されました。 CSS 部分は次のとおりです:

html, body{height:100%;}   
.wrapper{   
    min-height:100%;   
    _height:100%;   
    margin-bottom:-120px;   /*假定页脚的高度为120px*/  
}   
.footer, .footer_placeholder{height:120px;}   
  
如果还需要考虑css初始化和清理浮动，可能你还需要添加下面这部分css：   
  
body{margin:0;}   
.footer_placeholder{clear:both;}

ログイン後にコピー

以上がフッターをページ下部に固定するCSS実践チュートリアルの詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。

このウェブサイトの声明

この記事の内容はネチズンが自主的に寄稿したものであり、著作権は原著者に帰属します。このサイトは、それに相当する法的責任を負いません。盗作または侵害の疑いのあるコンテンツを見つけた場合は、admin@php.cn までご連絡ください。

ホットAIツール

Undresser.AI Undress

リアルなヌード写真を作成する AI 搭載アプリ

AI Clothes Remover

写真から衣服を削除するオンライン AI ツール。

Undress AI Tool

脱衣画像を無料で

Clothoff.io

AI衣類リムーバー

AI Hentai Generator

AIヘンタイを無料で生成します。

ホットツール

メモ帳++7.3.1

使いやすく無料のコードエディター

SublimeText3 中国語版

中国語版、とても使いやすい

ゼンドスタジオ 13.0.1

強力な PHP 統合開発環境

ドリームウィーバー CS6

ビジュアル Web 開発ツール

SublimeText3 Mac版

神レベルのコード編集ソフト（SublimeText3）

ホットトピック

Gmailメールのログイン入り口はどこですか？

7490

CakePHP チュートリアル

1377

Steamのアカウント名の形式は何ですか

Win11 Activation Key Permanent

NYTの接続はヒントと回答です

Related knowledge

ブートストラップに写真を挿入する方法 Apr 07, 2025 pm 03:30 PM

ブートストラップに画像を挿入する方法はいくつかあります。HTMLIMGタグを使用して、画像を直接挿入します。ブートストラップ画像コンポーネントを使用すると、レスポンシブ画像とより多くのスタイルを提供できます。画像サイズを設定し、IMG-Fluidクラスを使用して画像を適応可能にします。 IMGボーダークラスを使用して、境界線を設定します。丸い角を設定し、IMGラウンドクラスを使用します。影を設定し、影のクラスを使用します。 CSSスタイルを使用して、画像をサイズ変更して配置します。背景画像を使用して、背景イメージCSSプロパティを使用します。

ブートストラップのフレームワークをセットアップする方法 Apr 07, 2025 pm 03:27 PM

Bootstrapフレームワークをセットアップするには、次の手順に従う必要があります。1。CDNを介してブートストラップファイルを参照してください。 2。独自のサーバーでファイルをダウンロードしてホストします。 3。HTMLにブートストラップファイルを含めます。 4.必要に応じてSASS/LESSをコンパイルします。 5。カスタムファイルをインポートします（オプション）。セットアップが完了したら、Bootstrapのグリッドシステム、コンポーネント、スタイルを使用して、レスポンシブWebサイトとアプリケーションを作成できます。

ブートストラップボタンの使用方法 Apr 07, 2025 pm 03:09 PM

ブートストラップボタンの使用方法は？ブートストラップCSSを導入してボタン要素を作成し、ブートストラップボタンクラスを追加してボタンテキストを追加します

ブートストラップのサイズを変更する方法 Apr 07, 2025 pm 03:18 PM

Bootstrapの要素のサイズを調整するには、次のものを含むDimensionクラスを使用できます。

ブートストラップにスプリットラインを書く方法 Apr 07, 2025 pm 03:12 PM

ブートストラップスプリットラインを作成するには2つの方法があります。タグを使用して、水平方向のスプリットラインを作成します。 CSS Borderプロパティを使用して、カスタムスタイルのスプリットラインを作成します。

ブートストラップの日付を表示する方法 Apr 07, 2025 pm 03:03 PM

回答：ブートストラップの日付ピッカーコンポーネントを使用して、ページで日付を表示できます。手順：ブートストラップフレームワークを紹介します。 HTMLで日付セレクター入力ボックスを作成します。ブートストラップは、セレクターにスタイルを自動的に追加します。 JavaScriptを使用して、選択した日付を取得します。