CSS スティッキーフッタークラシックレイアウトの実装

CSS スティッキーフッタークラシックレイアウトの実装

スティッキーフッターレイアウトとは何ですか?

一般的な Web ページのレイアウトは、通常、ヘッダー部分、コンテンツ部分、フッター部分に分かれています。ヘッダー領域とコンテンツ領域のコンテンツが小さい場合、フッター領域はコンテンツ領域と一緒に配置されず、常に画面の下部に表示されます。コンテンツ領域に大量のコンテンツが含まれている場合、フッターはドキュメントのフローに応じて拡張され、常にページの下部に表示されます。これは伝説的なスティッキーフッターレイアウトです。分かりやすいと思いませんか?わからなくても大丈夫です。簡単な例を挙げてみましょう。

一般的に、モバイル ページでは、コンテンツの高さが 1 画面に収まらない場合はフッターが画面の下部に近くなり、コンテンツの高さが 1 画面を超える場合はフッターがそれに従います。

方法1: フレックスボックスレイアウト

  • 親コンテナの表示はフレックスで、項目の順序は垂直に指定されています。
  • コンテンツ要素のフレックスは 1 です。つまり、余分なスペースがあれば拡大します。
  • フッターは高さを定義します

デモを見るにはクリックしてください: Flexbox レイアウトで固定フッターを実装します

<div class="コンテナ">
  <div class="content">コンテンツ</div>
  <div class="footer">フッ​​ター</div>
</div>
体 {
  マージン: 0;
}
。容器 {
  ディスプレイ: フレックス;
  flex-direction: 列;
  最小高さ: 100vh;
}
。コンテンツ {
  フレックス: 1;
  /*必須ではありません*/
  幅: 100%;
  高さ: 300px;
  行の高さ: 300px;
  テキスト配置: 中央;
  色: #fff;
  フォントサイズ: 30px;
  フォントの太さ: 太字;
  背景色: #71a8da;
  /*必須ではありません*/
}
.フッター{
  高さ: 60px;
  /*必須ではありません*/
  幅: 100%;
  行の高さ: 60px;
  テキスト配置: 中央;
  色: #fff;
  フォントサイズ: 30px;
  フォントの太さ: 太字;
  背景色: #f85f2f;
  /*必須ではありません*/
}

方法 2: padding-bottom + 負の margin-top

  • コンテナラッパーは、最小高さ100vh(vh:ビューポートの高さ)を指定する必要があります。
  • コンテンツはコンテンツ コンテナーに書き込まれ、フッター コンテナーの高さとして padding-bottom が指定されます。
  • フッターは高さとマージントップを指定し、マージントップは高さの負の値です。

デモを見るにはクリックしてください: padding-bottom + negative margin-top で固定フッターを実現

<div class="wrapper">
  <div class="content">コンテンツ</div>
</div>
<div class="footer">フッ​​ター</div>
体 {
  マージン: 0;
}
.ラッパー{
  幅: 100%;
  最小高さ: 100vh;
}
。コンテンツ {
  /*padding-bottom はフッターの高さと同じである必要があります*/
  パディング下部: 60px;
  /*必須ではありません*/
  幅: 100%;
  高さ: 400px;
  行の高さ: 400px;
  テキスト配置: 中央;
  色: #fff;
  フォントサイズ: 30px;
  フォントの太さ: 太字;
  背景色: #71a8da;
  /*必須ではありません*/
}
.フッター{
  /*margin-top はフッターの高さの負の値と同じである必要があります*/
  上マージン: -60px;
  高さ: 60px;
  /*必須ではありません*/
  幅: 100%;
  行の高さ: 60px;
  テキスト配置: 中央;
  色: #fff;
  フォントサイズ: 30px;
  フォントの太さ: 太字;
  背景色: #f85f2f;
  /*必須ではありません*/
}

ヒント: 2 つの/**非必須**/の間の部分は、固定フッター レイアウトを実装するために必要なコードではありません。これは単なる補助的なスタイルであり、削除できます。

クラシック CSS スティッキー フッター レイアウトの実装に関するこの記事はこれで終わりです。CSS スティッキー フッターに関する関連コンテンツについては、123WORDPRESS.COM で以前の記事を検索するか、以下の関連記事を引き続き参照してください。今後も 123WORDPRESS.COM を応援していただければ幸いです。

<<:  DD DT DLタグの使用例

>>:  vue3 学習ノートにおける axios の使用の変更の概要

推薦する

nginx 設定ファイルで環境変数を使用する方法

序文Nginx はパフォーマンスを重視して設計された HTTP サーバーです。Apache や li...

CentOS7にMariaDB 10.2.4をインストールする方法の詳細な説明

CentOS 6 以前のバージョンでは、MySQL サーバー/クライアント インストール パッケージ...

IMG での UserMap の使用例

usemap は <img> タグの属性であり、使用するイメージ マップの名前を指定する...

MySQLのパフォーマンスが突然低下する理由

場合によっては、SQL ステートメントが通常どおり、非常に速く実行される状況に遭遇することがあります...

MySQLが日付フィールドインデックスを使用しない理由の要約

目次背景探検する要約する背景テーブルでは、dataTime フィールドは varchar 型に設定さ...

Bootstrap 3.0 の特殊効果の学習ノート(表示と非表示、フローティングの除去、閉じるボタンなど)

この記事の主な内容は次のとおりです。 1. 閉じるボタン2.キャレット3. フローティングを素早く設...

Docker デプロイメント RabbitMQ コンテナ実装プロセス分析

1. イメージをプルするまず、次のコマンドを実行して、イメージをローカル コンピューターにダウンロー...

Nginx は https ウェブサイト構成コード例を実装します

https ベースポート 443。これはキーと呼ばれるものに使用されます。これらのことを理解せずにで...

Linux ソースコードの解析 epoll

目次1. はじめに2. シンプルなepollの例2.1、epoll_create 2.2、構造体イベ...

Vue は zip ファイルのダウンロードを実装します

この記事の例では、Vueの具体的なコードを共有し、zipファイルをダウンロードして参考にしています。...

MySQLデータベースを定期的に自動バックアップする方法

データは貴重なものであることは誰もが知っています。データをバックアップしなければ、データをそのまま放...

MySQL スロークエリを通じて MySQL のパフォーマンスを最適化する方法

アクセス数が増えると、MySQL データベースへの負荷が増大します。MySQL アーキテクチャを使用...

Node.js コンソールで強調表示されたコードを印刷する方法

序文コードを実行してエラーが発生すると、エラーが出力されます。エラーにはスタック情報が含まれており、...

シェルスクリプトはNginxのaccess.logのPVを定期的にカウントし、APIに送信してデータベースに保存します。

1. PVとIPの統計一日のPV(ページビュー)をカウントする cat access.log | ...

Linux サーバーのグラフィック カードのクラッシュの解決策

ログインインターフェースの解像度が特に大きい場合、グラフィカルインターフェース全体が特に大きくなり、...