CSSはコンテンツの高さが足りない場合にフッターを自動的に下部に固定します

UI カットのプロセスでは、ページはヘッダー、コンテンツ、フッターの 3 つの部分で構成されることがよくあります。ページの内容が画面いっぱいに表示されない場合は、フッターが内容とともに浮き上がります。小さい画面では高さが制限されており、異常は見られませんが、大きい画面の場合は下部に多くの空白スペースができ、見た目に大きな影響を与えます。

ソリューション 1: フレックスボックス

ヘッダーは position: sticky; を使用して上部を吸収し、ボックス ( main ) を使用してコンテンツ ( container > content ) と下部 ( footer ) を囲みます。このボックスの最小の高さは、ヘッダーを除いた残りの画面の高さ ( min-height: calc(100vh - 50px); に設定されています。また、ボックスは elastic layout ( flex: 1 1 auto; ) を使用してコンテンツ領域を自動的に拡張し、下部は変更されません ( flex: 0 0 auto; )。そのため、コンテンツが不足している場合は下部が自動的に吸収され、コンテンツが十分にある場合は下部が自動的に移動します。

例：

<html>
  <ヘッド>
    <title>下部（フッター）を実現するための CSS - ソリューション 1: Flex-Box</title>
    <スタイル>
      体 {
        マージン: 0;
      }
      ヘッダー {
        高さ: 50px;
        背景: #20c997;
        位置: 固定;
        上: 0;
      }
      主要 {
        ディスプレイ: フレックス;
        flex-flow: 列の折り返しなし;
        最小高さ: calc(100vh - 50px);
      }
      。容器 {
        フレックス: 1 1 自動;
      }
      。コンテンツ {
        背景: #0d6efd;
      }
      フッター {
        フレックス: 0 0 自動;
        背景: #fd7e14;
      }
    </スタイル>
  </head>
  <本文>
    <!--ヘッダー-->
    <ヘッダー>
      ヘッダ
    </ヘッダー>
    <メイン>
      <div class="コンテナ">
        <!--目次-->
        <div class="content">
          コンテンツ
        </div>
      </div>
      <!--下-->
      <フッター>
        フッター
      </フッター>
    </メイン>
  </本文>
</html>

オンラインデモ: https://codepen.io/mazeyqian/pen/rNeymdG

利点: 底部の高さを自由に拡張できます。

デメリット: 古いブラウザとの互換性の問題 (Flex-Box と Calc) があります。

解決策2: 下部のマイナスマージン

コンテンツ領域はページを埋めるために最小の高さに設定され、下部には同じ高さの負の余白が設定されます。

例：

<html>
  <ヘッド>
    <title>下部（フッター）を実現するための CSS - 解決策 2: 負の距離の下部 `margin`</title>
    <スタイル>
      体 {
        マージン: 0;
      }
      ヘッダー {
        高さ: 50px;
        背景: #20c997;
        位置: 固定;
        上: 0;
      }
      。容器 {
        最小高さ: calc(100vh - 50px);
      }
      。コンテンツ {
        背景: #0d6efd;
      }
      フッター {
        高さ: 50px;
        上マージン: -50px;
        背景: #fd7e14;
      }
    </スタイル>
  </head>
  <本文>
    <!--ヘッダー-->
    <ヘッダー>
      ヘッダ
    </ヘッダー>
    <div class="コンテナ">
      <!--目次-->
      <div class="content">
        コンテンツ
      </div>
    </div>
    <!--下-->
    <フッター>
      フッター
    </フッター>
  </本文>
</html>

オンラインデモ: https://codepen.io/mazeyqian/pen/eYZvjzr

コンテンツの高さが足りない場合に、CSSを使用してフッターを自動的に下部に固定する方法についての記事はこれで終わりです。CSSを使用してフッターを自動的に下部に固定する方法の詳細については、123WORDPRESS.COMの以前の記事を検索するか、以下の関連記事を続けて参照してください。今後とも123WORDPRESS.COMを応援してください。

<<: Docker コンテナにデプロイされた Django のタイムゾーンの問題

>>: Nodejs のグローバル変数とグローバルオブジェクトの知識ポイントと使用方法の詳細