固定ヘッダーを使用してページの下部にフッターを配置するにはどうすればよいですか?

固定ヘッダーを使用してページの下部にフッターを配置する

問題と要件の理解:

あなたが求めていること固定ヘッダーがある場合でも、フッターをページの絶対下部に配置します。これにより、position:fixed の使用や表示画面の下部にフッターを配置する必要がなくなります。

Ryan Fait の Sticky Footer メソッド:

Ryan Fait のアプローチを次のように採用します。それはあなたの特定を満たす条件:

手順:

1. HTML と本文の高さを 100% に設定します: の高さ: 100% を定義します。そして 100% のビューポートの高さを確立します。
2. コンテンツの最小高さを 100% に設定します: #content に最小高さ: 100% を割り当てて、ビューポートの高さ全体を占めるようにします。
3. フッターを絶対に配置し、コンテンツをオフセットします: フッターを下に配置するには#content では、#content にフッターの高さに等しい負の margin-bottom を指定します。次に、#footer を絶対に #content の上に配置します。

4. コンテンツがフッターと重ならないようにする: 2 つのオプション:

   • スペーサー要素:
   • Padding-Bottom を追加しますおよび Box-Sizing: #content で padding-bottom: 100px および box-sizing: border-box を使用します (適切なベンダー プレフィックスを使用)。

   ヘッダーの追加:

   1. ヘッダー通常フロー内: 通常フローのヘッダーの場合、#content 内にネストします。
   2. 絶対配置ヘッダー: ヘッダーを絶対配置するには、それに応じて #content のパディングトップを調整します。 .

   による現代的なアプローチBox-Sizing:

   最新のブラウザーは box-sizing: border-box を完全にサポートしているため、スペーサー要素が不要になります。ただし、スペーサー要素の使用は、ブラウザーの幅広い互換性にとって依然として適しています。

   結論:

   このアプローチは、フッターをページの下部に配置するための堅牢なソリューションを提供します。ヘッダーを修正し、すべてのデバイスで最適な表示を保証します。