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

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

DDD
リリース: 2024-12-16 10:55:17
オリジナル
970 人が閲覧しました

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

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

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

#footer {</p>
<div class="code" style="position:relative; padding:0px; margin:0px;"><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>
<div class="code" style="position:relative; padding:0px; margin:0px;"><pre class="brush:php;toolbar:false">margin-bottom: 50px;
ログイン後にコピー

}

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

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

ソース:php.cn
前の記事:異なるブラウザ間で CSS を使用して要素のスタイルを設定するにはどうすればよいですか? 次の記事:HTML テーブルで列幅の拡大を防ぐにはどうすればよいですか?
このウェブサイトの声明
この記事の内容はネチズンが自主的に寄稿したものであり、著作権は原著者に帰属します。このサイトは、それに相当する法的責任を負いません。盗作または侵害の疑いのあるコンテンツを見つけた場合は、admin@php.cn までご連絡ください。
著者別の最新記事
最新の問題
関連トピック
詳細>
人気のおすすめ
人気のチュートリアル
詳細>
最新のダウンロード
詳細>
ウェブエフェクト
公式サイト
サイト素材
フロントエンドテンプレート