CSS でフッターの「下部吸収」効果を実現

よく遭遇する問題: 下部の要素を「下部に貼り付ける」効果を CSS でどのように実現するか。この記事では、「下部に貼り付ける」という点について、2 つの解釈をしています。

まず、コンテンツの量に関係なく、ボタンは表示されているウィンドウの下部に固定され、コンテンツ領域はスクロール可能である必要があります。
2 番目に、コンテンツ領域のコンテンツが少ない場合、フッター領域はコンテンツ領域と一緒に配置されず、常に画面の下部に表示されます。コンテンツ領域のコンテンツが多い場合、フッターはドキュメントフローに合わせて拡張され、常にページの下部に表示されます。

「下部吸収」効果の実現に関しては、スティッキーフッターレイアウトの方が馴染みがあるかもしれませんが、この方法は主に 2 番目の状況を解決するために使用されます。この記事では、次の 3 つのソリューションを使用して、それぞれ上記の 2 つの効果を実現し、実装の原則とその適用性について簡単に説明します。ラッパーは、コンテンツと固定された下部領域 (フッター) の 2 つの部分で構成されます。

HTML設定:

<!-- wrapper はコンテンツとフッターを囲む親コンテナーです--></div>
<div class="wrapper">
   <div class="content">
     <ul>
       <!-- ページのメインコンテンツ領域--></div>
       <li>1. これがコンテンツです、これがコンテンツです…</li>
       <li>2. これがコンテンツです、これがコンテンツです…</li>
       <li>3. これがコンテンツです、これがコンテンツです…</li>
       <li>4. これがコンテンツです、これがコンテンツです…</li>
       <li>5. これがコンテンツです、これがコンテンツです…</li>
       <li>6. これがコンテンツです、これがコンテンツです…</li>
       <li>7. これがコンテンツです、これがコンテンツです…</li>
       <li>8. これがコンテンツです、これがコンテンツです…</li>
       <li>9. これがコンテンツです、これがコンテンツです…</li>
      </ul>
   </div>
  <div class="footer">
    <!-- 吸収する必要がある領域 -->
    下部ボタン</div>
 </div>

注: 以下のソリューションの実装はこのHTML構造に基づいています

解決策1: 位置を使用して固定する要素を配置する

原則分析:

ラッパーの外側のコンテナ（HTML と本体を含む）の高さが画面全体を埋め尽くすことを期待します。つまり、height: 100% に設定し、ラッパーの min-height: 100% を設定します。ここで、height の代わりに min-height を設定するのは、ラッパー全体の最小の高さがフルスクリーンに拡大できることを保証するためです。コンテンツが画面を埋め尽くすほど十分でない場合でも、ラッパーの高さはフルスクリーンの高さのままです。ラッパーの高さがコンテンツの高さとともに増加すると、その高さは表示されているウィンドウの高さよりも大きくなる可能性があります。
コンテンツ (コンテンツを表示する必要のあるコンテナー、フッターの前の兄弟要素) の padding-bottom 値をフッターの高さの値以上に設定すると、コンテンツ内のコンテンツが下部のフッター領域で覆われることがなくなります。
フッターの配置方法を設定するときは、2 つの効果を区別する必要があります。フッターをページの下部に固定する場合は、ラッパーの position:relative を設定します。同様に、フッターをラッパーに対して絶対的に配置するには、フッターの position:absolute を設定します。このようにすると、コンテンツの量に関係なく、フッターをページの下部に固定できます。表示ウィンドウの下部に固定する場合は、フッターの position:fixed を設定し、対応する配置を設定します。
高さを固定の高さ値に設定します。

適用可能なシナリオ:

使用されるプロパティは、すべてのブラウザで成熟した形で実装されています。2 番目と 3 番目のソリューションと比較すると、この方法が最も推奨されます。以下のシナリオには適用されません: 配置された (固定された) 領域にテキストボックスがある場合、iOS システムでは、テキストボックスが入力メソッドを呼び出すと、配置された領域がポップアップし、下部から少し離れた位置に表示されるためです。

ページの下部に固定

デモ: https://codepen.io/hu0950/pen/yRVvQL

CSS設定:

html,
体
  高さ 100%
.ラッパー
  相対位置 // キー box-sizing border-box
  min-height 100% // キー padding-bottom 100px // この値はボタン ul の高さ以上に設定されます
    リストスタイルなし
    李
      高さ 100ピクセル
      背景ライトブルー
.フッター
  位置絶対 // キー下 0
  左 0
  右0
  height 100px // 固定の高さの背景をオレンジに設定

表示ウィンドウの下部に固定

デモ: https://codepen.io/hu0950/pen/NObMPb?editors=1100#0

CSS設定:

html,
体
  高さ 100%
.ラッパー
  ボックスサイズ ボーダーボックス
  min-height 100% // キー padding-bottom 100px // この値はボタン ul の高さ以上に設定されます
    リストスタイル: なし
    李
      高さ 100ピクセル
      背景ライトブルー
.フッター
  位置固定 // ボタンを可視ウィンドウの下部に固定します bottom 0
  左 0
  右0
  height 100px // 固定の高さの背景をオレンジに設定

解決策2: フレックスボックスレイアウトを使用する

デモ: https://codepen.io/hu0950/pen/bmBMMr

適用可能なシナリオ:

フレックスレイアウトは構造がシンプルでコードが簡潔です。ただし、flex には互換性の問題があるので、このレイアウト方法を使用する場合は注意が必要です。ページ下部に固定する効果を実現する場合、この柔軟なレイアウトの考え方が採用されます。フッターの高さを定義することなく、下部の固定領域の高さを柔軟に設定できます。これもこの方法の利点です。

ページの下部に固定

原則分析:

ラッパーの最小高さを 100% に設定します。ここでは、高さではなく最小高さを設定します。目的は、ラッパー全体の最小の高さをフルスクリーンに拡張することです。つまり、コンテンツが画面を埋めるのに十分でない場合でも、ラッパーの高さはフルスクリーンのままです。ラッパーの高さがコンテンツの高さに応じて変化すると、その高さは表示されているウィンドウの高さよりも高くなる可能性があり、必ずしも画面の高さと同じになるわけではありません。
ラッパーのレイアウトモードを flex に設定し、コンテンツの flex を 1 に設定すると、コンテンツの高さは常にラッパーの高さから下部フッターの高さを引いたものになります。

CSS設定:

html,
体
  高さ 100%
.ラッパー
  min-height 100% // キー display flex // キー flex-direction column // キー .content
  flex 1 //キー ul
    リストスタイルなし
    李
      高さ 100ピクセル
      背景ライトブルー
// 高さは変更せずにそのままにしておくことができます。footer
    パディング 20px
    背景オレンジ

表示ウィンドウの下部に固定

原則分析:

上記（ページ下部のソリューション 2 - 修正済みでの分析）に加えて、次の点にも注意する必要があります。

固定設定のためフッターがドキュメントフローの外側にあるため、ラッパーにパディングを与える必要があります。フッターがコンテンツ領域のコンテンツを覆わないようにするには、値をボタンの高さ以上にする必要があります。
フッターの配置モードを固定に設定し、対応する配置を設定して、フッターを表示されているウィンドウの下部に固定します。

CSS設定:

html,
体
  高さ 100%
.ラッパー
  display flex // キー min-height 100% // キー padding-bottom 62px // この値はボタンの高さ以上に設定されます flex-direction column // キー .content
  flex 1 //キー ul
    リストスタイル: なし
  李
    高さ 100ピクセル
    背景ライトブルー
.フッター
  位置固定 // キー左 0
  右0
  下0
  パディング 20px
  背景オレンジ

解決策3: calcを使用する

適用可能なシナリオ

このソリューションでは追加のスタイル処理は必要なく、コードも簡潔ですが、残念ながらモバイル端末の下位バージョンシステムは calc 属性と互換性がありません。

ページの下部で修正されましたデモ: https://codepen.io/hu0950/pen/ePBjdB

原則分析:

ラッパーは、コンテンツが少ないときにコンテンツが画面全体を埋め尽くすことを期待して、min-height: 100% に設定されています。同時に、コンテンツの高さが画面よりも高くなった場合、ラッパーの高さはコンテンツの高さに合わせて増加します。このようにして、フッターがコンテンツの下に順番に配置されることが保証されます。

CSS設定:

html,
体
  高さ 100%
.ラッパー
  min-height 100% //キー: height ではなく min-height
。コンテンツ
  min-height calc(100% - 100px) //キー: height ではなく min-height
  ウル
    リストスタイルなし
  李
    高さ 100ピクセル
    背景ライトブルー
// 固定高さ.footer
  高さ 100ピクセル
  背景オレンジ

表示ウィンドウの下部に固定デモ: https://codepen.io/hu0950/pen/bmBjqb?editors=1100#0

原則分析:

ラッパーは、コンテンツがどれだけあっても、その高さが画面の高さと同じになるように、height: 100% に設定されています。このように、コンテンツの高さ = 親要素ラッパーの高さ - 下部の固定要素フッターの高さになります。最後に、コンテンツの隠れた部分もスクロールで表示できるように、overflow: scroll をコンテンツに追加する必要があります。
コンテンツの親要素ラッパーには height:100% が設定されており、コンテンツの高さを計算するときに、100% が画面の高さに固定され、コンテンツの高さによって変化しないようにします。

CSS設定:

html,
体、
.ラッパー
  高さ 100%
。コンテンツ
  height calc(100% - 100px) // キー: min-height ではなく height を使用する
  オーバーフロースクロール // キー ul
    リストスタイルなし
    李
      高さ 100ピクセル
      背景ライトブルー
.フッター
  位置固定
  左 0
  右0
  下0
  高さ 100ピクセル
  背景オレンジ

最後に

筆者は、プロジェクトで上記の実装方式を試し、デバッグと検証を容易にするために各方式のデモも提供しました。各実装方法には、フッターの高さを固定する必要がある、モバイル端末の低バージョンシステムには適していないなどの制限的な問題があります。特定のニーズに応じて最適なソリューションを選択できます。最近のプロジェクトのニーズにより、インターネットで多くの情報を参照しましたが、すぐに使用できるソリューションを見つけることができませんでした。実装原則の分析も不足しているため、独自の要約と継続的なテストを行った後、この記事を書きました。友人たちの役に立つと嬉しいです。私にとって初めての金採掘体験です。皆さんの励ましを頂ければ幸いです。

以上がこの記事の全内容です。皆様の勉強のお役に立てれば幸いです。また、123WORDPRESS.COM を応援していただければ幸いです。

<<: MySQL マスタースレーブステータスチェックの実装

>>: DockerでLNMPアーキテクチャを展開する方法