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