HTML と CSS を使用して Web ページの下部にフッターを修正するにはどうすればよいですか?

HTML と CSS を使用してフッターをページの下部に固定します

質問の要件は、Web ページのフッターを次の位置に固定することです。画面サイズに関係なく、ページの下部に表示されます。

これを解決するには、position: 固定プロパティを使用します。 CSS。このプロパティを使用すると、ドキュメントのフローではなく、ビューポートを基準にして要素を配置できます。また、フッターをページの下部に配置するために、bottom プロパティを 0px に設定します。

さらに、フッターがビューポート全体を占有しないように、フッターの高さを設定する必要があります。 。この例では、高さを 50 ピクセルに設定します。

フッターの更新された CSS スタイルは次のとおりです。

#footer {
    position: fixed;
    height: 50px;
    background-color: red;
    bottom: 0px;
    left: 0px;
    right: 0px;
    margin-bottom: 0px;
}

フッターの上のコンテンツが重ならないようにするため、メインコンテンツの下にスペースを追加する必要があります。これは、body 要素の margin-bottom プロパティをフッターの高さ以上の値に設定することで実現できます。この例では、margin-bottom を 50px に設定します。

本文の更新された CSS スタイルは次のとおりです:

body {
    margin-bottom: 50px;
}

これらの変更により、フッターは次のように固定されます。画面サイズに関係なく、ページの下部に表示されます。

以上がHTML と CSS を使用して Web ページの下部にフッターを修正するにはどうすればよいですか?の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。