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 の使用の変更の概要

推薦する

CSS 手法を使用してモジュール性を実現する例

1. CSS 方法論とは何ですか? CSS methodologiesデザイン パターンまたは CS...

コンテンツ領域の周囲を回転する CSS 動的グラデーション ボーダーの効果 (サンプル コード)

レンダリング ネットで関連情報を調べたところ、現在のダイナミックグラデーションボーダーの実装方法のほ...

Vue スキャフォールディングでのレンダリングを理解する

Vue スキャフォールディングでは、エントリ ファイル main.js の新しい Vue コードに、...

Linux でソフトウェア パッケージのバージョンをアップグレードする方法の詳細な説明

Linux環境で、特定のソフトウェア(パッケージ)がインストールされているかどうかを確認したい。 r...

LayUI+Shiroは動的なメニューを実装し、メニュー拡張の例を記憶します

目次1. Maven 依存関係2. メニュー関連クラス1. メインメニュー2. サブメニュー3. S...

ローカルで起動したときに Vue プロジェクトがクッキーを保持できない問題を解決する

vueプロジェクトをパッケージ化してサーバーにデプロイし、正常にログインできるが、ローカルで起動する...

MySQL <> および <=> 演算子の紹介

<> 演算子機能: 等しくないことを示します。注: 「!=」演算子と同じ機能を持ちますが...

MySQL での正規表現の使用に関する詳細

目次1. はじめに2. 製品テーブルを準備する2.1 ステートメントの順序2.2 大文字と小文字の区...

Dockerプライベート倉庫の構築と利用の詳細説明

イメージは hub.docker.com に保存できますが、ネットワーク速度が比較的遅いです。内部環...

Linux での一般的なシェル スクリプト コマンドと関連知識

目次1. 覚えておくべき知識1. 変数タイプ2. シェル変数の説明3. シングルクォート、ダブルクォ...

XHTML 入門チュートリアル: テキストの書式設定と特殊文字

<br />このセクションでは、XHTML でテキストの書式設定と特殊文字を実装する方法...

CSS を使用してサブ要素に応じて異なるスタイルを記述する方法

達成すべき効果: 必要なもの1枚、2枚、3枚とスタイルが異なります。子要素の判定はjsで完結できます...

Tencent Cloud で HTTPS を無料で導入する方法

最近、WeChatアプレットを書いていたとき、WeChatアプレットではすべてのリクエストインターフ...

MySQL ストアド プロシージャで月ごとにテーブルを作成する方法

詳細には立ち入らずに、コードに直接進みましょう。一緒にコミュニケーションを取り、学びましょう。月ごと...

Vue+element+springboot でファイルダウンロードの進行状況バー表示機能を実装する例

目次1. 需要背景2. 最適化計画3. 具体的な実施3.1 フロントエンドコード3.2 背景コード4...