CSS スティッキーフッター実装コード

CSS スティッキーフッター実装コード

この記事では、CSS スティッキー フッターの実装コードを紹介し、共有します。詳細は次のとおりです。

上の図に示す効果は、固定フッターです。ページコンテンツの長さが足りない場合、フッターはウィンドウの下部に配置されます。ページコンテンツがウィンドウを超える場合、フッターはページの下部に表示されます。

以下にいくつかの実装ソリューションを示します。

1. フレックスボックスレイアウト

HTML 構造は次のとおりです。

<本文>

    <div class="header">スティッキーフッター</div>

    <div class="content">

        <p>テスト、テスト、テスト、テスト、テスト、テスト、テスト、テスト、テスト、テスト、テスト、テスト、テスト、テスト、テスト、テスト、テスト、テスト</p>

        <p>テスト、テスト、テスト、テスト、テスト、テスト、テスト、テスト、テスト、テスト、テスト、テスト、テスト、テスト、テスト、テスト、テスト、テスト</p>

        <p>テスト、テスト、テスト、テスト、テスト、テスト、テスト、テスト、テスト、テスト、テスト、テスト、テスト、テスト、テスト、テスト、テスト、テスト</p>

        <p>テスト、テスト、テスト、テスト、テスト、テスト、テスト、テスト、テスト、テスト、テスト、テスト、テスト、テスト、テスト、テスト、テスト、テスト</p>

        <p>テスト、テスト、テスト、テスト、テスト、テスト、テスト、テスト、テスト、テスト、テスト、テスト、テスト、テスト、テスト、テスト、テスト、テスト</p>

        <p>テスト、テスト、テスト、テスト、テスト、テスト、テスト、テスト、テスト、テスト、テスト、テスト、テスト、テスト、テスト、テスト、テスト、テスト</p>

    </div>

    <div class="footer">

        <p>これはフッターです</p>

    </div>

</本文>

メインの CSS は次のとおりです。

体{

    ディスプレイ: フレックス;

    フレックスフロー: 列;

    最小高さ: 100vh;

}

。コンテンツ{

    フレックス: 1;

}

FlexBoxは実装がとても簡単で、効果も掲載されています

マップの効果はあまり良くないようですけど、効果は出ています！ ！ ！ ！

2. 定番のルーチン: padding-bottom + margin-top

HTML 構造は次のとおりです。

<本文>

    <div class="wrapper clearfix">

        <div class="title">スティッキーフッター</div>

        <div class="content">

            <p>テスト、テスト、テスト、テスト、テスト、テスト、テスト、テスト、テスト、テスト、テスト、テスト、テスト、テスト、テスト、テスト、テスト、テスト</p>

            <p>テスト、テスト、テスト、テスト、テスト、テスト、テスト、テスト、テスト、テスト、テスト、テスト、テスト、テスト、テスト、テスト、テスト、テスト</p>

            <p>テスト、テスト、テスト、テスト、テスト、テスト、テスト、テスト、テスト、テスト、テスト、テスト、テスト、テスト、テスト、テスト、テスト、テスト</p>

        </div>

    </div>

    <div class="footer">

        <p>これはフッターです</p>

    </div>

</本文>

メインの CSS は次のとおりです。

.ラッパー{

    最小高さ: 100vh;

}

。コンテンツ{

    パディング下部: 50px;

}

.フッター{

    高さ: 50px;

    上マージン: -50px;

}

実装効果（画面録画ソフトのインストールが必要だと感じています）：

このソリューションを使用するときは、次の点に注意してください。

1. ラッパーの最小の高さはウィンドウの高さと同じである必要があります

2. コンテンツの padding-bottom、フッターの margin-top、height の 3 つのプロパティ値の絶対値は一致している必要があります (margin-top は負の値なので絶対値です)。一致を保つ理由は、スティッキー フッターをより適切に実装するためです。高さが比較的小さい場合、スティッキー フッターの効果は得られますが、下部に隙間ができます。

3. このソリューションは、すべての主要ブラウザと互換性があります。うーん、悪くないですね

4. 本文でフローティングレイアウトを使用する場合、互換性の問題を考慮する必要があります。ここでは Google Chrome に焦点を当てます。

上記の 4 番目の互換性ソリューション:

有名な clearfix ハックを .wrapper に追加します。

.clearfix{

    表示: インラインブロック

}

.clearfix:後{

    表示: ブロック

    コンテンツ： "。"

    高さ: 0

    行の高さ: 0

    クリア: 両方

    可視性: 非表示

}

3. 高さ固定ソリューション

HTML 構造は次のとおりです。

<本文>

    <div class="wrapper">

        <div class="header">スティッキーフッター</div>

        <div class="content">

            <p>テスト、テスト、テスト、テスト、テスト、テスト、テスト、テスト、テスト、テスト、テスト、テスト、テスト、テスト、テスト、テスト、テスト、テスト</p>

            <p>テスト、テスト、テスト、テスト、テスト、テスト、テスト、テスト、テスト、テスト、テスト、テスト、テスト、テスト、テスト、テスト、テスト、テスト</p>

            <p>テスト、テスト、テスト、テスト、テスト、テスト、テスト、テスト、テスト、テスト、テスト、テスト、テスト、テスト、テスト、テスト、テスト、テスト</p>

            <p>テスト、テスト、テスト、テスト、テスト、テスト、テスト、テスト、テスト、テスト、テスト、テスト、テスト、テスト、テスト、テスト、テスト、テスト</p>

            <p>テスト、テスト、テスト、テスト、テスト、テスト、テスト、テスト、テスト、テスト、テスト、テスト、テスト、テスト、テスト、テスト、テスト、テスト</p>

        </div>

    </div>

    <div class="footer">

        <p>これはフッターです</p>

    </div>

</本文>

主な CSS スタイルは次のとおりです。

.ラッパー{

    最小高さ: calc(100vh - 50px);

    ボックスのサイズ: 境界線ボックス;

}

注: 50px はフッターの高さです。calc() 演算子の前後にスペースを残す必要があります。

結果は掲載しませんが、想像してみてください。結果は上記とほぼ同じです。 。 。

以上がこの記事の全内容です。皆様の勉強のお役に立てれば幸いです。また、123WORDPRESS.COM を応援していただければ幸いです。

<<:  Vueスロットの使用の詳細

>>:  k8sとDockerの関係についての簡単な説明

推薦する

Ubuntu 18.0.4 は mysql をインストールし、エラー 1698 (28000): ユーザー ''root''@''localhost'' のアクセスが拒否されましたを解決します

序文最近 Linux を学び、その後 Win から Ubuntu に変更しました。以前インストールし...

背景位置パーセンテージ原則の詳細な説明

今日、誰かがコードを調整するのを手伝っていたとき、次のようなスタイルを見つけました。 背景位置: 5...

MySQL Community Server 8.0.12 のインストールと設定方法のグラフィックチュートリアル

MySQL 8 は、NoSQL、JSON などのサポートなど、まったく新しいエクスペリエンスをもたら...

MySQL メタデータで Hive テーブル作成ステートメントのコメント スクリプトを生成する方法

序文この記事は主にMySQLメタデータ生成Hiveテーブル作成ステートメントコメントスクリプトに関す...

Web データ ストレージ: Cookie、UserData、SessionStorage、WebSqlDatabase

クッキーこれはクライアント ブラウザの状態を保存するための標準的な方法です。Cookie はブラウザ...

【Webデザイン】E-WebTemplates の美しい海外の Web ページ テンプレート (FLASH+PSD ソース ファイル+HTML) を共有します

これらはすべて海外のE-WebTemplates WebサイトからのWebページテンプレートであり、...

Vue ソング プログレス バーのサンプル コード

なお、これはvue-cliで作成したプロジェクトではありません。vue.jsを参照して記述したHTM...

ウェブデザインの達人がよく使うレスポンシブフレームワークを共有する（要約）

この記事では、Web デザインの達人がよく使用するレスポンシブ フレームワーク (概要) を紹介し、...

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

フロントエンド Web エンジニアとして、ページ効果を作成するときに次の現象に遭遇したことがあるはず...

HTML+CSS でハートビートの特殊効果を作成する

今日は、シンプルなハートビート効果を作成します。多くのコードは必要ありません。ボックスを追加し、CS...

CSS の flex と inline-flex の違いの詳細な説明

inline-flex は inline-block と同じです。内部要素用の display:fl...

Dockerコンテナのネットワークポート設定プロセスの詳細な説明

ネットワークポートの公開実際、Docker にはネットワーク ポートの公開に関わる 2 つのパラメー...

コードの互換性を高めるために、HTMLを次のように記述します。

たとえば、スクリーン リーダー ソフトウェアを必要とするユーザーなどです。フロントエンド開発者として...

MySQL データベースの高度なクエリとマルチテーブルクエリ

MySQL マルチテーブルクエリワークシートを追加する -- ユーザーテーブル (ユーザー) テーブ...

Node.js を使用して png 画像に透明なピクセルがあるかどうかを判断する方法

背景PNG 画像は jpg 画像よりも多くのストレージスペースを占有しますが、PNG 画像の品質は大...