絶対配置を使用せずに CSS でスティッキーフッターを作成するにはどうすればよいですか?

CSS を使用してレスポンシブ フッターを作成する方法

ページの下部にフッターを維持することは、Web デザインの一般的な要件です。ただし、一部のユーザーは「絶対」位置プロパティの使用に問題が発生します。この記事では、レイアウトを崩さずにスティッキー フッター効果を実現するための正しい CSS 実装について説明します。

問題の背景

ユーザーがフッターの位置を修正しようとして失敗する場合、通常は次のコードを適用します。

position: absolute;
left: 0;
bottom: 0;
height: 100px;
width: 100%;

提案された解決策

プラグインや追加のプラグインを使用せずに問題を解決するにはHTML 要素の場合は、次の手順に従います。

1. 次の CSS ルールをスタイルシートに追加します。

html {
    position: relative;
    min-height: 100%;
}
body {
    margin: 0 0 100px; /* bottom = footer height */
}
#bottom-footer {
    position: fixed;
    left: 0;
    bottom: 0;
    height: 100px;
    width: 100%;
}

2. 「body {margin」で指定された高さになっていることを確認してください。 }" はフッター要素の実際の高さと一致します (例: 100px).

注: ターゲット設定には、「footer #bottom-footer」ではなく、HTML 要素 ID「#bottom-footer」を使用することをお勧めします。後者は元の CSS スタイルと競合する可能性があるためです。 .

以上が絶対配置を使用せずに CSS でスティッキーフッターを作成するにはどうすればよいですか?の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。