ページの下部にフッターを作るCSSを修正する方法

（仕事が第一の方法を試してみてください、この問題が発生し、実現可能な、それはここに掲載しました）

 

CSS

達成するために、Webページの開発中に、あなたはこのようなシナリオが発生する場合があります。ページの下部に固定フッターフッターを、ページの本体は画面の高さを埋めることができない場合は、に位置フッター  画面の下部に 、もし画面を越えてページの本文高さは、フッタは常にある  ページの一番下 。

以下のシーン概略図、

 

 

 

 

それでは、どのようフッターは常にページ、それの下部に固定されているのでしょうか？

一般的に、一つの特定の技術および構造HTMLを持つ唯一のCSSを使用してこの目的を達成するための2つの方法が、存在する。他のJSコードは、オペレーティング要素DOMを使用することです。

この記事では、この目的を達成するためのCSSのテクニックを使用するには3つの方法について説明します。

第一の方法

この方法の第一の原則は、ということです

ページ  html 、  body 、  container 満足しなければならない  、画面（ページ）を満たすことができるように、  相対位置を使用して、  ページの下部に固定され、ページの本体  容器は、容易以上に等しく設定されなければならない  高さ  のために、  で算出された高さ  コンテナ、なるように、それは常に、ページの下部に固定されます。height:100% footer bottom:0 page footer padding-bottom footer page footer 

私たちは、最初のHTML構造を見て、

<div id="container">
 <div id="header">Header Section</div>
 <div id="page" class="clearfix">
 <div id="left">Left Sidebar</div>
 <div id="content">Main content</div>
 <div id="right">Right sidebar</div>
 </div>
 <div id="footer">Footer Section</div>
</div>

ここでの唯一の注意点は、ということである  footer コンテナがある  container 包括コンテナ。

そして、CSSコードを見て、

html,body {
 margin: 0;
 padding:0;
 height: 100%;
}
#container {
 min-height:100%;
 height: auto !important;
 height: 100%; /*IE6不识别min-height*/
 position: relative;
}
#header {
 background: #ff0;
 padding: 10px;
}
#page {
 width: 960px;
 margin: 0 auto;
 padding-bottom: 60px;/*等于footer的高度*/
}
#footer {
 position: absolute;
 bottom: 0;
 width: 100%;
 height: 60px;/*脚部的高度*/
 background: #6cf;
 clear:both;
}
/*=======主体内容部分省略=======*/

CSSコードから、我々はページの本体がいることがわかり  page セットアップし  、そして  高さが同じです。それはここでは使用することができない  代わりに  。padding-bottom footer margin-bottom padding-bottom 

jsfiddleインスタンスを完了し  、ここ 。

この溶液は、欠点を有する：  footer 高さを固定する必要があり、  page 以上のセットの高さに等しくなければなりません  。場合は  、高さを固定し、または適応フッターではなく、あなたのために、このプログラムを実行する必要がありません。padding-bottom footer 

第二の方法

第二の方法は、原則として次のとおりです。

footer コンテナと  container 簡単にはもはや関係が含まれ、二人は同じレベルではありません。 コンテナの高さが100％に設定され、その  ページ全体がいっぱいになって占領しており、その後、再追加  の容器、  ページの下部を超えなければならない、とページがスクロールバーを表示されます。そこで、我々はしなければならない  の負の値を追加します。  オフスクリーンから引き出されたコンテナを。負の値  と同じ高さ。html body container container footer footer footer margin-top footer margin-top footer 

私たちは、最初のHTML構造を見て、

<div id="container">
 <div id="header">Header Section</div>
 <div id="page" class="clearfix">
 <div id="left">Left sidebar</div>
 <div id="content">Main content</div>
 <div id="right">Right sidebar</div>
 </div>
</div>
<div id="footer">Footer section</div>

ここではそれを見ることができ、  footer コンテナと  container コンテナは兄弟です。

CSSコードを見て

html,
body {
 height: 100%;
 margin: 0;
 padding: 0;
}
#container {
 min-height: 100%;
 height: auto !important;
 height: 100%;
}
#page {
 padding-bottom: 60px; /*高度等于footer的高度*/
}
#footer {
 position: relative;
 margin-top: -60px; /*等于footer的高度*/
 height: 60px;
 clear:both;
 background: #c6f;
}
/*==========其他div省略==========*/

我々が得た  footer コンテナが設定  負の値 の  、目的のために  オフスクリーンから引き出さ容器。 追加するコンテナ  に目的を、コンテナの高さを計算し  、スクロールバーの挙動が表示されたページが正しいだろうときように、大きさに。margin-top footer page padding-bottom footer page 

jsfiddleインスタンスを完了し  、ここ 。

第1の方法にこの方式の欠点は、同じです。

第三の方法

この方法の第3の原理は、ということです

いいえコンテンツ使用  push にコンテナを  footer ページの一番下をプッシュする容器だけでなく、ために  container 負の値を設定する  ことは、  容器と  、容器の高さは同じです。実際には、第二の方法と、この方法は比較的近いです。しかし、それは無意味以上である  容器。margin-bottom margin-bottom footerpush push 

我々は、関連するHTML構造を見て、

<div id="container">
 <div id="header">Header Section</div>
 <div id="page" class="clearfix">
 <div id="left">Left sidebar</div>
 <div id="content">Main Content</div>
 <div id="right">Right Content</div>
 </div>
 <div class="push"><!-- not put anything here --></div>
</div>
<div id="footer">Footer Section</div>

CSSコード

html,
body{
 height: 100%;
 margin:0;
 padding:0;
}
#container {
 min-height: 100%;
 height: auto !important;
 height: 100%;
 margin: 0 auto -60px;/*margin-bottom的负值等于footer高度*/
}
.push,
#footer {
 height: 60px;
 clear:both;
}
/*==========其他div效果省略==========*/

jsfiddleインスタンスを完了し  、ここ 。

短所：前述の二つの方法に比べて、マルチを使用する  容器は、このアプローチは、同じ制限  高さの一部は、高度に適応の効果を達成することができません。div.push footer 

概要

3つの方法が達成するために特定のHTML、CSSと交配構造を使用して、以前に説明します。それは、彼らが最近のブラウザの新しいバージョンでも実行することができ、より軽量です。しかし、この方法で必要なCSSを使用しなければならない  footer ページがフッターフッターの高さに到達するための手と足の容器本体は、常に目的の下部に固定されているので、高さは、固定されています。

さらに除くCSSの方法があり、  迅速なラフ激しい それが直接DOM要素を操作するためのコードをJS、方法。この方法では、HTMLに限らず、すべてのブラウザと互換性が理論的にされていません。しかし、直接使用のJSは、DOMを操作するので、私は個人的に、お勧めしません、この方法は非常にされて  重い 動作は、HTML、CSSのパフォーマンスを助長されていませんし、ページのサイズを変更するときに発生し、ページが再描画されているため、多くの場合、いくつかのちらつきやカードを起こしますデイトン。

参照リスト

• スティッキーフッターコードを使用する方法（ページの一番下に近いフッター方法を許可します）
• フッターを探ります
• ページの下部にフッタースティックを作ります
• ページの下部にフッターを修正する方法

終わり。すべての権利を保有します  。@gejiawen 

達成するために、Webページの開発中に、あなたはこのようなシナリオが発生する場合があります。ページの下部に固定フッターフッターを、ページの本体は画面の高さを埋めることができない場合は、に位置フッター  画面の下部に 、もし画面を越えてページの本文高さは、フッタは常にに位置しています  ページの下部

 

ます。http：//ju.outofmemory.cn/entry/194786からの振替