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.

このサイトはスパムを低減するために Akismet を使っています。コメントデータの処理方法の詳細はこちらをご覧ください

関連記事

no image

WordPress カテゴリごとに部分的デザインを変えたい時

この記事は約 1 分で読めます。 WordPressで自分なりにテーマをカスタマイズしていると、カテゴリごとにデザインを変えたい!ということがあります。 ページまるごとデザイン(表示)を変える場合と、 …

WordPress 「Contact Form7」でエラーメッセージが出たときに確認したこと

この記事は約 1 分で読めます。 「Contact Form7 4.4」をバージョンアップした途端、エラーメッセージが出るようになりました。 エラーメッセージが出たことで、再度設定を見直すキッカケがで …

no image

WordPress 「contact form 7」と「Akismet」でスパムメール対策をしてみた。

この記事は約 1 分で読めます。 このサイトでは、「お問い合せ」のページに「contact form 7」というプラグインを使用しています。 コメントスパム対策にWordpressにデフォルトで入って …

no image

WordPress 子テーマを作ってみた。

この記事は約 1 分で読めます。 WordPressで公開されているテーマを自分なりにカスタマイズしたいとき、2通りの方法があると思います。 1つ目は直接テーマをいじる方法。2つ目は、「子テーマ」を作 …

no image

WordPress ソーシャルブックマークのボタンを付けてみた

この記事は約 1 分で読めます。 何気によく見掛けるTwitterやFacebookなど、ソーシャルブックマークのボタン。 1つ1つ設定するのは、面倒なのでまとめて複数のサービスのボタンを簡単に取り付 …