Webの記録

フッターをブラウザの下部に固定する方法

投稿日:2012年7月11日 更新日:

この記事は約 4 分で読めます。

コンテンツが少ない場合、フッターの下に余白が出来てしまいます。

さすがに、ちょっと気になる・・・ってワケで、今回はフッターをブラウザの下部に固定する方法をいろいろ試してみました。

なかでも、様々なブラウザに対応して、常にフッターを下部に固定する方法「CSS Sticky Footer」をメモします。

【2015.2.1追記】jsライブラリ『footerFixed.js』を使うと、とても簡単にフッターをブラウザ下部に固定できます。この記事の最後に追記します。



CSSでフッターをブラウザの下部に固定する方法

「Here is the Full List」ブラウザ対応状況

IE、Firefox、Safari、Google Chrome、Opera他様々なブラウザに対応しています。
内容は「Here is the Full List」に詳しく書かれています。

CSS Sticky Footerのソースコード例

htmlの例

<body>
	<div id="wrap">

		<div id="header">
	
		</div><!--#header-->

		<div id="main">
	
		</div>

	</div><!--#wrap-->

	<div id="footer">
		<p>Copyright © 2012 xxx All Rights Reserved.</p>
	</div><!--#footer-->
</body>

cssの例

html, body {
	height: 100%;
	margin: 0;
}

#wrap {
	min-height: 100%;
}

#main {
	overflow:auto;
	padding-bottom: 150px; /* フッターの高さと同じに */
} 

#footer {
	position: relative;
	margin-top: -150px; /* フッターの高さと同じに */
	height: 150px;
	clear:both;
	background: #cfc7bf;

	} 

/*Opera Fix*/
body:before {
	content:"";
	height:100%;
	float:left;
	width:0;
	margin-top:-32767px;/
	
}

これでフッターを下部に固定出来ました!IE6に対応したい場合は、以下を追加します。

<!--&#91;if !IE 7&#93;>
	<style type="text/css">
		#wrap {display:table;height:100%}
	</style>
<!&#91;endif&#93;-->

お時間のある方は、CSS Sticky Footerに説明がありますので、チェックしてみてください。


jsライブラリ『footerFixed.js』でフッターをブラウザの下部に固定する方法

参考サイトより、『footerFixed.js』をダウンロードします。
フッターのidをfooterとしておきます。
ダウンロードした『footerFixed.js』をheadで読み込みします。

<script type="text/javascript" src="js/footerFixed.js"></script>

設定はこれだけ。簡単に実装できて、MITライセンス!有難いです♪


【参考サイト】footerをウィンドウ下部に固定する『footerFixed.js』|to-Rさま

-Webの記録
-, ,

執筆者:


comment

メールアドレスが公開されることはありません。 * が付いている欄は必須項目です

This blog is kept spam free by WP-SpamFree.

関連記事

no image

WordPress 「Contact Form7」で送信完了画面と自動送信メールを試してみた

この記事は約 2 分で読めます。 WordPressの「Contact Form7」は、お問い合せフォームを簡単に取り付ける事が出来るという便利なプラグインです。 以前から利用しているのですが、最近ま …

no image

はじめてのHTML5。

この記事は約 1 分で読めます。 そろそろいろんなところで、HTML5を見かけるようになり・・・今イチバン気になっているのがHTML5です。 これからHTML5を覚えていこうと思っているところなので、 …

no image

ムームードメインで取得した独自ドメインをエックスサーバーで使う設定方法

この記事は約 1 分で読めます。「エックスサーバー」を利用する事が決まっていて、ドメインをどこで取得しようかな?と思った時、「エックスドメイン」という選択肢もあったのですが、今回は「ムームードメイン」 …

no image

苦手なJavaScriptをイチから勉強してみる【if文とfor文】

この記事は約 1 分で読めます。 苦手なJavaScriptをイチから勉強してみる【JavaScriptを外部ファイルにする】の続きとしてメモします。 イチから「JavaScript」を学び直しをする …

no image

WordPressプラグイン「WP-PageNavi」でページナビゲーションを表示♪

この記事は約 1 分で読めます。 このサイトを作り始めて1年になりました。 WordPress初心者で、毎日「?」の繰り返しでした。 そんな私も、気がつくと・・・投稿記事が100を超え、「新しい記事へ …