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

推薦する

MySQLのデッドロックとログに関する詳細な説明

最近、MySQL オンラインでいくつかのデータ異常が発生しましたが、すべて早朝に発生しました。ビジネ...

MySQL データベースのデータ テーブルの最適化、外部キーの分析、3 つのパラダイムの使用

この記事では、例を使用して、MySQL データベースのデータ テーブルの最適化、外部キーの使用、およ...

Python Django アプリケーションを Docker 化する方法

Docker は、開発者やシステム管理者がアプリケーションを軽量コンテナとして構築およびパッケージ化...

HTMLフォーム送信方法のケーススタディ

フォームの送信方法をまとめると次のようになります。 1. 送信ボタンを使用して送信します。送信ボタン...

Zabbixを使用してOracleテーブルスペースの操作プロセスを監視する

0. 概要Zabbix は非常に強力なオープンソースの監視ツールです。以下では、Zabbix がテー...

Ubuntu のインストール グラフィック ドライバーと Cuda チュートリアル

目次1. 元のドライバーをアンインストールする2. 新しいグラフィックカードドライバーをダウンロード...

div+cssとウェブ標準ページの利点

div 要素は、HTML ドキュメント内のブロックレベル コンテンツの構造と背景を提供するために使用...

ウェブページのコアコンテンツ（画像とテキスト）の視覚的表現の紹介

情報の最適化と改良は常にデザインの最初のステップです。 「これは百度アライアンスユーザーエクスペリエ...

HTMLウェブページ切り替えのさまざまな変換効果

<META http-equiv="Page-Enter" CONTENT...

便利なモバイルスクロールプラグイン BetterScroll

目次スクロールをスムーズにするBetterScrollのスクロール体験慣性ローリングエッジリバウンド...

Dockerはrabbitmqのサンプルコードをインストールして実行します

イメージをプルします: [mall@VM_0_7_centos ~]$ sudo docker pu...

HTML と CSS の命名規則の概要

CSS命名規則 ヘッダー: ヘッダーコンテンツ: コンテンツ/含むフッターナビゲーション: navサ...

Linux CentOS MySQL データベースのインストールと設定のチュートリアル

MySQLデータベースのインストールに関するメモ、みんなで共有a) MySQL ソースインストールパ...

zk+kafka+storm クラスターの docker-compose デプロイメントの実装

クラスターの展開の概要172.22.12.20 172.22.12.21 172.22.12.22 ...

Reactにおけるコンポーネント通信の詳細な説明

目次親コンポーネントは子コンポーネントと通信します子コンポーネントは親コンポーネントと通信しますコン...