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

推薦する

MySQL 最適化接続最適化

記事「MySQL の最適化: キャッシュの最適化」では、システムによってコンパイルされた変数値、また...

Vue+element ui はアンカーの配置を実現します

この記事では、アンカー配置を実現するためのVue +要素UIの具体的なコードを例として紹介します。具...

Element PlusはAffixを実装します

目次1. コンポーネントの紹介2. ソースコード分析2.1 テンプレート2.2 スクリプト2.3 実...

JSX を使用してコンポーネント パーサー開発を構築する例

目次JSX環境の構築プロジェクトの設定NPMを初期化するwebpackをインストールするBabelを...

MySQLデータベースを定期的に自動バックアップする方法

データは貴重なものであることは誰もが知っています。データをバックアップしなければ、データをそのまま放...

Windows 10 での MySQL 8.0.12 解凍バージョンのインストール グラフィック チュートリアル

この記事は、MySQL 8.0.12解凍版のインストールグラフィックチュートリアルを記録しています。...

Mysql-connector-java ドライバのバージョン問題の概要

Mysql-connector-java ドライバのバージョンの問題私のデータベースのバージョンは ...

Linux システムの仮想ホストで Swoole Loader 拡張機能を有効にする方法

特記事項: Swoole 拡張機能のみがインストールされ、サーバーはホストにインストールされません。...

CentOS VPS に SSH 経由で MySQL をインストールする方法

yum install mysql-serverと入力します。続行するにはYを押してくださいインスト...

Ubuntu 18.04 LTSでIPアドレスを設定するための完全な手順

序文Ubuntu 18.04 LTS で IP アドレスを設定する方法は、これまで使用されていた設定...

MySQLとPythonの相互作用の例

目次1. データを準備するデータテーブルを作成するデータの挿入2. SQLドリル1. SQL文の強化...

HTML5で見逃せないAPIやヒントのまとめ

これまでのブログ投稿では、HTML 5 ではあまり使われていないが注目すべき API やヒントに焦点...

sqlite を mysql スクリプトに移行する方法

さっそく、コードを直接投稿します。具体的なコードは次のとおりです。 パーレル # # https:/...

Ckeditor + Ckfinderを使用したJavaScriptファイルアップロードケースの詳細な説明

目次1. 準備2. 減圧3. 統合を開始する1. 準備Ckeditor_4.5.7_full + C...

Tomcat マルチポートドメイン名アクセスと gzip 圧縮方式を有効にする構成

1. デフォルトのポート8080に加えて、ドメイン名のアクセスとserver.xmlのオープンにポー...