コンテンツの高さに関係なくページの下部に残る固定フッターを作成するにはどうすればよいですか?

フッターの位置: ページまたはコンテンツの下部、高さに適応

動的なコンテンツ、流動的なフッターの配置

Web デザインでは、多くの場合、次のことが望ましいです。コンテンツの長さに関係なく、フッターがページまたはブラウザ ウィンドウの下部に留まるようにしてください。これは次の方法で実現できます:

Flexbox ソリューション

Flexbox を使用すると、スティッキー フッターの作成が簡単になります:

1. フレックス コンテナを定義します (例: #main-
2. フレックスコンテナのフレックス方向を設定します。ページの高さ全体に及ぶように、min-height を 100% に設定します。
3. 0 より大きい flex 値を持つ子要素を flex コンテナに追加します (例:article { flex: 1; })。これにより、要素が垂直方向に拡張され、フッターが下に向かって押し出されます。

CSS コード:

html, body {
  height: 100%;
  margin: 0;
  padding: 0;
}

#main-wrapper {
  display: flex;
  flex-direction: column;
  min-height: 100%;
}

article {
  flex: 1;
}

以上がコンテンツの高さに関係なくページの下部に残る固定フッターを作成するにはどうすればよいですか?の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。