ホームページ >ウェブフロントエンド >CSSチュートリアル >Web ページの下部にフッターを修正するにはどうすればよいですか?

Web ページの下部にフッターを修正するにはどうすればよいですか?

DDD
DDDオリジナル
2024-12-16 10:55:171036ブラウズ

How to Fix a Footer to the Bottom of a Web Page?

フッターをページの下部に固定する方法

多くの Web サイトでは、フッターがページの下部に固定されていないという問題に遭遇します。ページ、特にコンテンツの量が少ないページ。画面サイズやコンテンツの長さに関係なく、フッターがページの下部に残るようにするには、次の CSS ソリューションを使用します。

#footer {</p>
<pre class="brush:php;toolbar:false">position: fixed;
height: 50px;
background-color: red;
bottom: 0px;
left: 0px;
right: 0px;
margin-bottom: 0px;

}

このコードは、次のプロパティをfooter:

  • position: フッターの位置を固定に設定し、ページのスクロール位置に関係なく、フッターが所定の位置に残るようにします。
  • height: 高さを指定します。 footer.
  • background-color: デモ用にフッターの背景色を調整します。
  • bottom: フッターの下端の位置を設定します。ページの下部から 0 ピクセル。
  • :フッターの左端をページの左端に揃えます。
  • right: フッターの右端をページの右端に揃えます。
  • margin-bottom: 不要な下マージンを削除します。

コンテンツが固定フッターと重ならないようにするには、追加の CSS ルールを body 要素に適用できます:

body {</p>
<pre class="brush:php;toolbar:false">margin-bottom: 50px;

}

これにより、本文に 50 ピクセルの下マージンが追加され、固定フッター用のスペースが作成されます。表示されます。

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

声明:
この記事の内容はネチズンが自主的に寄稿したものであり、著作権は原著者に帰属します。このサイトは、それに相当する法的責任を負いません。盗作または侵害の疑いのあるコンテンツを見つけた場合は、admin@php.cn までご連絡ください。