ページ下部のフッターを修正する方法（複数の方法）

<div id="コンテナ">
<div id="header">ヘッダーセクション</div>
<div id="page" class="clearfix">
ページコンテンツ
</div>
<div id="footer">フッ​​ターセクション</div>
</div>

<div id="コンテナ">
<div id="header">ヘッダーセクション</div>
<div id="page" class="clearfix">
<div id="left">左サイドバー</div>
<div id="content">メインコンテンツ</div>
<div id="right">右サイドバー</div>
</div>
<div id="footer">フッ​​ターセクション</div>
</div>

html、本文{
マージン: 0;
パディング:0;
高さ: 100%;
}
＃容器 {
最小高さ:100%;
高さ: 自動 !重要;
height: 100%; /*IE6 は min-height を認識しません*/
位置: 相対的;
}
#ヘッダー{
背景: #ff0;
パディング: 10px;
}
#ページ {
幅: 960ピクセル;
マージン: 0 自動;
padding-bottom: 60px;/*フッターの高さと同じ*/
}
#フッター{
位置: 絶対;
下部: 0;
幅: 100%;
height: 60px;/*フィートの高さ*/
背景: #6cf;
クリア:両方;
}
/*=======メインコンテンツ=======*/
＃左 {
幅: 220ピクセル;
フロート: 左;
右マージン: 20px;
背景：ライム;
}
＃コンテンツ {
背景: オレンジ;
フロート: 左;
幅: 480ピクセル;
右マージン: 20px;
}
＃右{
背景: 緑;
フロート: 右;
幅: 220ピクセル;
}

<div id="コンテナ">
<div id="page">メインコンテンツ</div>
</div>
<div id="footer">フッ​​ター</div>

<div id="コンテナ">
<div id="header">ヘッダーセクション</div>
<div id="page" class="clearfix">
<div id="left">左サイドバー</div>
<div id="content">メインコンテンツ</div>
<div id="right">右サイドバー</div>
</div>
</div>
<div id="footer">フッ​​ターセクション</div>

html,
体 {
高さ: 100%;
マージン: 0;
パディング: 0;
}
＃容器 {
最小高さ: 100%;
高さ: 自動 !重要;
高さ: 100%;
}
#ページ {
padding-bottom: 60px;/*高さはフッターの高さと同じです*/
}
#フッター{
位置: 相対的;
margin-top: -60px;/*フッターの高さと同じ*/
高さ: 60px;
クリア:両方;
背景: #c6f;
}
/*===========その他のdiv============*/
#ヘッダー{
パディング: 10px;
背景：ライム;
}
＃左 {
幅: 18%;
フロート: 左;
右マージン: 2%;
背景: オレンジ;
}
＃コンテンツ{
幅: 60%;
フロート: 左;
右マージン: 2%;
背景: 緑;
}
＃右 {
幅: 18%;
フロート: 左;
背景: 黄色;
}

<div id="コンテナ">
<div id="page">ここにウェブサイトのコンテンツを入力します。</div>
<div class="push"><!-- コンテンツがありません --></div>
</div>
<div id="footer">フッ​​ターセクション</div>

<div id="コンテナ">
<div id="header">ヘッダーセクション</div>
<div id="page" class="clearfix">
<div id="left">左サイドバー</div>
<div id="content">メインコンテンツ</div>
<div id="right">適切なコンテンツ</div>
</div>
<div class="push"><!-- ここには何も入れないでください --></div>
</div>
<div id="footer">フッ​​ターセクション</div>

html,
体{
高さ: 100%;
マージン:0;
パディング:0;
}
＃容器 {
最小高さ: 100%;
高さ: 自動 !重要;
高さ: 100%;
margin: 0 auto -60px;/*margin-bottomの負の値はフッターの高さに等しい*/
}
。押す、
#フッター{
高さ: 60px;
クリア:両方;
}
/*==========その他の div 効果===========*/
#ヘッダー{
パディング: 10px;
背景：ライム;
}
＃左 {
幅: 18%;
フロート: 左;
右マージン: 2%;
背景: オレンジ;
}
＃コンテンツ{
幅: 60%;
フロート: 左;
右マージン: 2%;
背景: 緑;
}
＃右 {
幅: 18%;
フロート: 左;
背景: 黄色;
}
#フッター{
背景: #f6c;
}

<div id="header">ヘッダーセクション</div>
<div id="page" class="clearfix">
<div id="left">左サイドバー</div>
<div id="content">メインコンテンツ</div>
<div id="right">適切なコンテンツ</div>
</div>
<div id="footer">フッ​​ターセクション</div>

<div id="footer">フッ​​ターセクション</div>

*{マージン: 0;パディング: 0;}
.clearfix:前、
.clearfix:後{
コンテンツ："";
表示:テーブル;
}
.clearfix:後{
クリア:両方;
}
.clearfix {
ズーム:1; /* IE <8 */
}
#フッター{
高さ: 60px;
背景: #fc6;
幅: 100%;
}
/*===========その他のdiv============*/
#ヘッダー{
パディング: 10px;
背景：ライム;
}
＃左 {
幅: 18%;
フロート: 左;
右マージン: 2%;
背景: オレンジ;
}
＃コンテンツ{
幅: 60%;
フロート: 左;
右マージン: 2%;
背景: 緑;
}
＃右 {
幅: 18%;
フロート: 左;
背景: 黄色;
}

<script type="text/javascript">
// ウィンドウの高さが画像に依存する場合に使用されるウィンドウ読み込みイベント
$(window).bind("load", 関数() {
var フッターの高さ = 0,
フッタートップ = 0,
$footer = $("#footer");
ポジションフッター();
//positionFooter関数を定義する
関数positionFooter() {
//div#footerの高さを取得する
フッターの高さ = $footer.height();
//div#footerと画面上部の間の距離
footerTop = ($(window).scrollTop()+$(window).height()-footerHeight)+"px";
/* デバッグ関連
console.log("ドキュメントの高さ: ", $(document.body).height());
console.log("ウィンドウの高さ: ", $(window).height());
console.log("ウィンドウのスクロール: ", $(window).scrollTop());
console.log("フッターの高さ: ", footerHeight);
console.log("フッター上部: ", footerTop);
コンソールログ("------------")
*/
//ページコンテンツの高さが画面の高さより小さい場合、div#footer は画面の下部に絶対配置されます。それ以外の場合は、div#footer は通常の静的配置を維持します。
(($(document.body).height()+footerHeight) < $(window).height()) の場合 {
$footer.css({
位置: 「絶対」
}).stop().animate({
トップ: フッタートップ
});
} それ以外 {
$footer.css({
位置: "静的"
});
}
}
$(window).scroll(positionFooter).resize(positionFooter);
});
</スクリプト>