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

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

Barbara Streisand
リリース: 2024-12-09 18:14:15
オリジナル
634 人が閲覧しました

How Can I Fix My Website Footer to the Bottom of the Page?

フッターをページの下部に固定できない

Web サイトのフッターをページの下部に固定できない場合は、画面サイズについては、考えられる解決策がいくつかあります:

位置: 固定; を使用します。 property.

position:fixed; プロパティを使用すると、ページがスクロールされている場合でも、要素を画面上の特定の位置に固定できます。このプロパティを使用するには、次のコードを CSS ファイルに追加します:

#footer {
  position: fixed;
  bottom: 0;
}
ログイン後にコピー

margin-top: auto; プロパティを使用します.

margin-top: auto; プロパティを使用すると、要素を親コンテナ内で垂直方向の中央に配置できます。このプロパティを使用するには、CSS ファイルに次のコードを追加します。

body {
  margin-top: auto;
}
ログイン後にコピー

position: fixed;margin-top: auto の組み合わせを使用します。 ; プロパティ.

フッターをページの下部に固定して中央に配置したい場合垂直方向では、position:fixed; プロパティと margin-top: auto; プロパティを組み合わせて使用​​できます。これを行うには、CSS ファイルに次のコードを追加します:

body {
  margin-top: auto;
}

#footer {
  position: fixed;
  bottom: 0;
  width: 100%;
}
ログイン後にコピー

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

ソース:php.cn
このウェブサイトの声明
この記事の内容はネチズンが自主的に寄稿したものであり、著作権は原著者に帰属します。このサイトは、それに相当する法的責任を負いません。盗作または侵害の疑いのあるコンテンツを見つけた場合は、admin@php.cn までご連絡ください。
著者別の最新記事
人気のチュートリアル
詳細>
最新のダウンロード
詳細>
ウェブエフェクト
公式サイト
サイト素材
フロントエンドテンプレート