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

推薦する

Nest.js 認証検証方法の例

目次0x0 はじめに0x1 RBAC 実装0x2 クレームベースの承認0x3 統合 CASL 0x4...

MySQLインデックスの作成について知っておくべきこと

目次序文： 1. インデックスメソッドを作成する2. インデックスを作成するために必要な権限序文： ...

Tomcat は親の委任メカニズムを破壊して Web アプリケーションの分離を実現します。

目次Tomcat クラスローダー階層WebAppクラスローダー共有クラスローダーカタリナクラスローダ...

CSS と JS を使用して下線効果を実装する方法の例

この記事では、主に 2 種類の下線の動的効果について説明します。1 つ目は、ホバーすると X 軸が内...

DHTML オブジェクト (さまざまな HTML オブジェクトの共通プロパティ)

!DOCTYPE HTML ドキュメントが準拠するドキュメント型定義 (DTD) を指定します。 ...

MySql8.0.19 インストールピットレコードを共有する

前回の記事ではMySql8.0.19のインストール手順を紹介しました。必要な方はクリックしてご覧くだ...

Baidu百科事典UIの開発動向について議論する

<br />百度百科事典の正式版がついにオンラインになりました。2年間の「テスト版」の帽...

Element-ui レイアウト (行と列コンポーネント) の実装

目次基本的な手順と使用方法行コンポーネントの分析レンダリング機能ソースコード分析Col成分の分析コン...

JDBC 探索 SQLException 分析

1. SQLExceptionの概要JDBC を使用してデータ ソース (この記事のデータ ソースは...

複数の X 軸を使用して 7 日間の天気予報を実現するための Echarts サンプル コード

目次UIデザインEcharts の例の効果序文サンプルコード最終結果UIデザイン Echarts の...

ウェブページを作るときに知っておくべきいくつかのスキル

1. IE6 では z-index が無効です。 CSS では、階層を変更するために z-index...

Ember.js と Vue.js の詳細な比較

目次概要フレームワークを選択する理由は何ですか? js のエンバーEmber.js と Vue.js...

MySQL マスタースレーブレプリケーションの原理からインストールと設定までを包括的に解説します。

マスタースレーブレプリケーションがなぜ必要なのでしょうか? 1. 複雑な業務システムでは、SQL 文...

MySQL InnoDB のトランザクション特性を確保するにはどうすればよいですか?

序文「データベース トランザクションの特徴は何ですか?」と尋ねられたら、 ACID 特性である原子性...

Nginx で IP と IP 範囲をブロックする方法

前面に書かれたNginx は単なるリバース プロキシおよび負荷分散サーバーではなく、電流制限、キャッ...