ホームページ > ウェブフロントエンド > CSSチュートリアル > Firefox および Internet Explorer でフッターをブラウザーの下部に配置するにはどうすればよいですか?

Firefox および Internet Explorer でフッターをブラウザーの下部に配置するにはどうすればよいですか?

Patricia Arquette
リリース: 2024-10-31 20:33:02
オリジナル
956 人が閲覧しました

How to Position a Footer at the Bottom of the Browser in Firefox and Internet Explorer?

CSS を使用してフッターを下部に配置する

多くの開発者は、フッターをブラウザ ウィンドウの下部に配置しようとすると問題に遭遇します。さまざまなテクニックを使用しているにもかかわらず、フッターが中央に表示される場合があります。 Firefox と Internet Explorer の両方に共通するこの問題の解決策は次のとおりです。

CSS コード

次の CSS コードは、フッターをブラウザの下部に効果的に貼り付けます。

<code class="css">#Footer {
  position: absolute;
  bottom: 0;
  width: 100%;
}</code>
ログイン後にコピー

説明

  1. position: 絶対;: 通常のドキュメント フローからフッターを削除し、配置できるようにします。
  2. bottom: 0;: フッターの下端を 0 に設定し、ウィンドウの下部に配置します。
  3. width: 100%;: フッターが画面の幅全体に広がるようにします。

HTML 構造

HTML 構造に < が含まれていることを確認します。 ;ディビジョン>フッターには id="Footer" を使用します:

<code class="html"><form>
  ...
  <div class="Main" />
  <div id="Footer" />
</form></code>
ログイン後にコピー

追加メモ

  • 設定位置: 固定。フッターは Firefox では機能する可能性がありますが、Internet Explorer では機能しません。
  • フッター用のスペースを確保するには、メイン コンテンツ (class="Main") のマージンまたはパディングの調整が必要な場合があります。

これらの CSS スタイルを適用すると、Firefox と Internet Explorer の両方でフッターをブラウザ ウィンドウの下部に正しく配置できるようになります。

以上がFirefox および Internet Explorer でフッターをブラウザーの下部に配置するにはどうすればよいですか?の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。

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