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

推薦する

ウェブサイトデザインの経験 ウェブサイト構築におけるよくある間違いのまとめ

注意: 計画、設計、開発のいずれの場合でも、これらの間違いは避けなければなりません。 1. ナビゲー...

VMWARE で Centos8 仮想マシンをコピーすることによって発生する IP 損失の問題の解決策

VMwareでcentos8サービスをインストールしてコピーすると、次の問題が発生します。 コピー前...

CentOs7 64 ビット MySQL 5.6.40 ソースコードのインストール プロセス

1. インストールプロセス中に問題が発生しないように、まず依存パッケージをインストールします。 [r...

Tomcat および Web アプリケーションの Docker デプロイメントの実装

1.dockerをオンラインでダウンロードする yum インストール -y epel-release...

モバイルデバイスでインラインスクロールを実装するための4つのソリューションの詳細な説明

ニーズの発見領域の一部のみスクロールでき、残りの部分は移動できない場合、どのような方法を使用しますか...

HTML テーブルの行間隔を変更する方法の例

HTML テーブルを使用する場合、行間隔を変更する必要がある場合がありますが、余白、パディング、折り...

JavaScript データ型の詳細な説明

目次1. リテラル1.1 数値リテラル1.2 浮動小数点リテラル1.3 特別な値1.4 文字列リテラ...

JavaScriptプロトタイプとプロトタイプチェーンを徹底的に理解する

目次序文基礎を築くプロトタイプコンストラクタのプロパティ__プロト__プロトタイプチェーン改善する要...

nginx を使用して同じドメイン名で複数の Vue プロジェクトをデプロイし、リバース プロキシを使用する方法

効果現在、プロジェクトは2つ（project1、project2）あり、nginxに付属するinde...

JavaScript の querySelector メソッドと getElementById メソッドの違いを分析する

目次1. 概要1.1 querySelector() と querySelectorAll() の使...

LinuxシステムにTomcatをインストールし、サービスの起動とシャットダウンを構成する

Linuxシステムでサービスの起動とシャットダウンを構成する1. コマンドcd /etc/init....

Springboot+Vue-Cropperでアバターの切り取りとアップロードの効果を実現

アバターをアップロードするにはVue-Cropperコンポーネントを使用します。参考までに具体的な内...

コードを通じてHTMLエスケープ文字を識別する方法について説明します

データ内に次のような特徴を持つ「 ' 」などの文字が含まれることがあります。 &# ...

6つのレイアウトでのFrameLayoutの使用

序文前回はLinearLayoutについて説明しました。今回はFrameLayoutの使い方を説明し...

Javascript 操作メカニズム イベントループ

目次1. 4つのコンセプト1. JavaScriptはシングルスレッドです2. タスクキュー3. 同...