ページの下部にHTMLフッターを配置する簡単な方法

ページの下部にHTMLフッターを配置する簡単な方法

要件:ページ コンテンツが短く、ブラウザーの高さをサポートできない場合でも、フッターをウィンドウの下部に配置したい場合があります。

アイデア:フッターの親レイヤーの最小の高さは 100% です。フッターは親レイヤーに対して絶対的に下 (下: 0) に設定され、フッターの高さは親レイヤーで予約されている必要があります。

HTMLコード:

XML/HTML コードコンテンツをクリップボードにコピー
  1. <!-- 親レイヤー -->      
  2. < div   id = "ワッパー" >      
  3.      <!-- メインコンテンツ -->      
  4.      < div   id = "メインコンテンツ" >      
  5.      </div>​​      
  6.      <!-- フッター -->      
  7.      < div   id = "フッター" >      
  8.      </div>​​      
  9. </div>​​      

CSS は次のとおりです。

CSSコードコンテンツをクリップボードにコピー
  1. #ワッパー{
  2.      position : relative ; /*重要!フッターがワッパーの位置に対して絶対的に相対的であることを確認します */      
  3.      height : auto ; /* ブラウザの高さが拡大されたときにページが正常に表示されることを確認する*/      
  4.      min-height : 100% /* IE6 はサポートしていません。IE6 は別途設定する必要があります*/      
  5. }
  6. #フッター{
  7.    位置:絶対;下: 0; /* キー */      
  8.     left :0; /* IE ではこれを必ず覚えておいてください */      
  9.     height : 60px ; /* フッターの高さは固定値である必要があります*/      
  10. }
  11. #メイン-コンテンツ{
  12.     padding-bottom : 60px ; /*重要!フッター用に予約されたスペース*/      
  13. }

この時点で、他のブラウザでは正常に表示できますが、IE 6 では別途処理する必要があります。

CSSコードコンテンツをクリップボードにコピー
  1. <!--[IE 6の場合]->
  2. <スタイル>
  3. #wapper { height :100%;} /* 高さが足りない場合、IE は自動的にレイヤーを拡大します */      
  4. </スタイル>
  5. <![endif]-->

HTMLフッターをページ下部に配置するという上記のシンプルな実装方法は、エディターが皆さんと共有する内容のすべてです。参考になれば幸いです。また、123WORDPRESS.COMを応援していただければ幸いです。

<<:  Vuex のコアコンセプトと基本的な使用法の詳細な説明

>>:  MySQL データの集約とグループ化

推薦する

Node.jsサービスDockerコンテナアプリケーション実践のまとめ

この記事では、Docker コマンドの使用とインストールについては説明しません。Docker を基礎...

Mac での MySQL と Squel Pro の設定

Node.js の人気に応えて、最近、いくつかのサーバー側機能を実装するために Node.js を使...

IE6のバグと修正は予防戦略です

元記事:究極の IE6 チートシート: 25 以上の Internet Explorer 6 のバグ...

vue.jsは画像のURLに従って画像をダウンロードします

最近、フロントエンドの vue.js ドッキング機能モジュールに取り組んでいたとき、画像をダウンロー...

Linux ドメイン ネーム サービス DNS 設定方法

DNSとはDNS の正式名称は Domain Name System で、ドメイン名解決システムを意...

HTML で複数のフォームのテキスト ボックスを揃える方法

フォームのコードは図の通りです。スタイルシートがまだ追加されていないため、フォームが整列されておらず...

Vue3 シングルファイルコンポーネントのスタイル機能の詳細な説明

目次スタイルスコープスタイルモジュール状態駆動型動的CSS要約するスタイルスコープ注意事項:スタイル...

非常に優れた CSS スキル 10 選のコレクションと共有

ここでは、CSS テクニックを巧みに使用することで、HTML を変更せずにブログやテンプレートの外観...

MySQLは変数を使用してさまざまなソートを実装します

コアコード -- 以下では、MySQLでのソート列の実装を示します -- テストデータ CREATE...

MySQL における := と = の違いをグラフィカルに紹介

:= と = の違い=設定および更新の場合にのみ、:= と同じ効果、つまり代入効果があり、それ以外の...

Vue3ナビゲーションバーコンポーネントのカプセル化実装方法

参考までに、Vue3でナビゲーションバーコンポーネントをカプセル化し、スクロールバーのスクロールに合...

MySQL 1対多関連クエリのページングエラー問題の解決方法

XML価格照会のクエリデータにはリストが含まれているため、コレクションが必要です <結果マップ...

HTML マルチメディア アプリケーション: Web ページにフラッシュ アニメーションと音楽を挿入する

1. HTML_falshアニメーションでのマルチメディアの応用（WebページへのFlashアニメー...

Js における new 演算子の役割の詳細な説明

序文Js は現在最も一般的に使用されているコード操作言語であり、その中でも new 演算子は特によく...

MySQL でデータの重複挿入を回避する 4 つの方法

最も一般的な方法は、フィールドに主キーまたは一意のインデックスを設定することです。重複データを挿入す...