ページの下部に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 データの集約とグループ化

推薦する

Vue3はフロントエンドのログを出力するためにaxiosインターセプターを使用する

目次1. はじめに2. axiosインターセプターを使用してフロントエンドログを出力する1. はじめ...

DockerにRabbitMQをインストールする詳細な手順

目次1. 鏡を見つける2. RabbitMQイメージをダウンロードする3. RabbitMQコンテナ...

Angularコンポーネントの仲介モードの詳細な説明

目次1. 仲介業者モデル2. 例1. 見積コンポーネントに購入ボタンを追加する2. 親コンポーネント...

17の広告効果測定の解釈

1. 広告の 85% は未読です<br />解釈: 成功する広告の 15% にどうやって...

大規模なデータテーブルのコピー効率を向上させるMySQLソリューション

序文この記事では主に、MySQL で大規模なデータ テーブルのコピーの効率を向上させることに関する関...

MySQL にテーブルデータを挿入するときに中国語の文字化けが発生する問題を解決する方法

1. 問題開発中に、他のデータベースから MySQL データベース テーブルにデータを挿入すると、次...

本をめくる効果を実現するネイティブJS

この記事では、ネイティブ JS で実装された本をめくる効果の図を紹介します。効果は次のとおりです。 ...

MySQL データベース ターミナル - 一般的な操作コマンド コード

目次1. ユーザーを追加する2. ユーザー名とホストを変更する3. パスワードを変更する4. ユーザ...

HTML チュートリアル: HTML 水平線分

<br />このタグを使用すると、画面上に水平線を表示して、ページのさまざまな部分を区切...

Nginx の realip モジュールの使い方の基礎学習

序文nginx モジュールには、公式とサードパーティの 2 種類があります。nginx のインストー...

MySQL DDLステートメントの使用

序文SQL の言語分類には主に以下の種類があります。 DDLデータ定義言語作成、削除、変更データ定義...

VMware Workstation 14 Pro は CentOS 7.0 をインストールします

VMware Workstation 14 ProにCentOS 7.0をインストールする具体的な方...

HTML でよく使われるタグの概要 (必読)

コンテンツ詳細タグ: <h1>~<h6>タイトルタグ<pre>テ...

el-table カプセル化に基づくドラッグ可能な行と列、および選択列コンポーネントの実装

効果環境が必要ビュー要素UIドラッグアンドドロッププラグインSortable.js必要な構成プロパテ...

autoconfを使用してMakefileを生成し、プロジェクトをコンパイルする手順

序文Linux では、コンパイルとリンクには Makefile を使用する必要がありますが、適切な ...