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の関係についての簡単な説明

推薦する

HTML ファイルにフラッシュ ビデオ形式 (flv、swf) ファイルを埋め込む方法

Flash ファイル形式: .FLV および .SWFフラッシュ ビデオ形式には、.flv と .s...

vue3とvue2の利点の比較

目次利点1: diffアルゴリズムの最適化利点2: ホイスト静的静的リフティング利点3: cache...

NodeJs の高メモリ使用量のトラブルシューティング実戦記録

序文これは、オンライン コンテナーの拡張によって発生した調査です。最終的には、実際の OOM が原因...

HTML でシンプルな ListViews 効果を実装するためのサンプル コード

シンプルなリストビュー効果を実現するHTML結果： CSS スタイル ファイル listviewTe...

HTML+CSS マージテーブル境界線サンプルコード

table タグと td タグに境界線を追加すると、デフォルトでは次のように二重境界線が使用されます...

MySQL EXPLAIN出力列の詳細な説明

1. はじめにEXPLAIN ステートメントは、MySQL がステートメントを実行する方法に関する情...

CSS仕様 BEM CSSとOOCSSサンプルコード詳細説明

序文プロジェクト開発中、各人のコーディング習慣が異なるため、記述された CSS コードは十分に構造化...

Vue/React シングルページ アプリケーションをリフレッシュなしで復元するソリューション

目次導入なぜわざわざ？落とし穴のあるコミュニティソリューション（Vue を例に挙げる）現時点では良い...

セマンティックHTML構造を理解する方法

HTML と CSS は誰もが知っていると思います。HTML の構造と CSS の表現の分離も知って...

VMware pro15 インストール macOS10.13 詳細インストール図（画像とテキスト）

編集者は最近、macOS システムを使い始めたかったので、VMware に macOS イメージ シ...

ES6のシンボルデータ型について詳しく説明します

目次シンボルデータタイプシンボルが表示される理由シンボルの特徴シンボルの応用rbオブジェクトにupメ...

React Hooksコンポーネント間で値を渡す方法の詳細な説明（tsを使用）

目次父から息子へ息子から父へクロスレベルコンポーネント（親から子孫）父から息子へpropsを通じて値...

React ルーティング リンク構成の詳細

1. 属性へのリンク（１）ルーティングパスを配置する（２）指定された形式でオブジェクトを配置する{パ...

Centos7のホスト名を変更する3つの方法

方法 1: hostnamectl の変更ステップ1 ホスト名を確認するホスト名ステップ2 ホスト名...

MySQLのexplain型の詳細な説明

導入：多くの場合、さまざまな選択ステートメントを使用して必要なデータを照会した後、多くの人は作業が正...