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

推薦する

初心者でもウェブサイトアイコンを作成する手順をすぐに学べます

<br />オリジナルURL: http://www.lxdong.com/post/m...

従来の Tomcat スタートアップ サービスと Springboot スタートアップ組み込み Tomcat サービス (推奨) の違い

springmvc による Spring の統合Spring 統合 springmvc の web....

Tomcat メモリ オーバーフロー問題の解決経験

少し前に、製品バージョンをテスト用にテスターに​​提出したのですが、テスト結果はまったく予想外のもの...

DockerコンテナはホストのMySQL操作にアクセスする

背景：インターフェイスを提供する Flask プロジェクトがあり、これは Docker コンテナを使...

HTMLエンコードによる文字化け問題について

今日、3年生から質問がありました。彼が書いた HTML コードを開くと、文字化けした文字が表示されま...

JavaScript初心者がよく犯す間違い

目次序文undefined と null の混同紛らわしい数値の加算と文字列の連結戻り文の改行の問題...

MySQLパーティションテーブルは月別に分類されています

目次テーブルを作成するデータベース ファイルを表示します。入れるクエリ消去補足:Mysqlは月テーブ...

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

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

フレックスとポジションの互換性の詳細な説明マイニングノート

今日は、すべてのブラウザ (主に IE 9 以上と Chrome) と互換性のある自分のホームページ...

ウェブデザインにおけるテキスト入力ボックスのパラメータの説明

<br />一般的なゲストブック、フォーラムなどでは、テキスト入力ボックスが使われていま...

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

コードをコピーコードは次のとおりです。 <a href=# title="ここに表示...

Vue で rem 適応を使用する方法

1. 開発環境vue 2. コンピュータシステム Windows 10 Professional E...

一般的なMySQLストレージエンジンの長所と短所

目次すべてのストレージエンジンを表示InnoDB ストレージ エンジンMyISAM ストレージエンジ...

「fsck」を使用して Linux のファイルシステムエラーを修正する方法

序文ファイル システムは、データの保存方法と復元方法を整理する役割を担います。 いずれにせよ、時間の...

ユーザー名が使用可能かどうかを確認するVueメソッド

この記事では、ユーザー名が使用可能かどうかを確認するためのVueの具体的なコードを例として紹介します...