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

ページまたはコンテンツの下部にあるフッター

はじめに

Web 開発では、次のことが不可欠です。特に動的コンテンツを扱う場合は、Web ページ上の要素の適切な配置を確保します。一般的な課題の 1 つは、ページまたはコンテンツのどちらが下にあるかに応じて、フッターを下部に残すことです。

問題ステートメント

提供された HTML 構造には、ヘッダー、ナビゲーション、記事、フッターを含む親ラッパー要素 (#main-wrapper)。課題は、article 要素内のコンテンツの高さに基づいてフッターの位置を動的に調整することです。コンテンツが豊富な場合、フッターはページの下部に固定されますが、コンテンツが限られている場合はブラウザ ウィンドウの下部に移動します。

Flexbox ソリューション

1 つの堅牢なソリューションこの問題を解決する最新のアプローチは、フレックスボックスを活用することです。 Flexbox は、コンテナ内の要素の位置決めと整列を簡素化する多用途のレイアウト システムを提供します。要素を垂直方向に整列させるフレックスボックスの機能を利用することで、目的のスティッキー フッター動作を実現できます。

CSS コード

次の CSS コードは、フレックスボックスを使用してスティッキー フッターを実装します。 footer:

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

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

article {
  flex: 1;
}

この設定では、#main-wrapper 要素はフレックスボックスですこれは、要素が垂直に積み重ねられることを意味します。記事要素には flex: 1 があり、ヘッダーとナビゲーションによって占有されない残りのスペースを占有します。

記事内に十分なコンテンツがある場合、要素はフッターを押し下げて、次の位置に配置されます。ページの下部。ただし、コンテンツが制限されている場合、#main-wrapper 要素の min-height により常にビューポートを満たすことが保証されるため、記事は縮小され、フッターはブラウザ ウィンドウの下部に動的に移動します。

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