フッターをCSSやjQueryで常に最下部（一番下）に固定表示する方法

このページのタイトルとURLをコピーする

HTML・CSS 最終更新日：2020/02/14 公開日：2012/08/09

ウェブサイトを制作中に、「あれ？コンテンツが少なくてフッターが浮き上がってきてる！？」なんて経験はありませんか？

弊社は東京と名古屋でホームページ制作を行っている会社ですので、稀にですがそういったシーンがあります。

「そうじゃなくて最下部にフッターを固定表示したいんだーっ！」というあなたのためのエントリーです。

↓弊社リンク
「株式会社WEB企画」のホームページはこちら

1 CSSで実装する
- 1.1 flexbox（CSS3)を使う
- 1.2 position: fixed; を使う
2 jQueryで実装する

CSSで実装する

flexbox（CSS3)を使う

この記事を公開した際には、存在していなかったのですが、最近では flexbox のお陰でかなり実装が楽になっています。（2019/06/11現在）

下記の内容をコピペで実装できます。HTML5の書き方をしていることが条件になりますね。

【HTML】

<body>
  <div id="wrapper">

    <main>
 
      <!-- メインコンテンツ -->
 
    </main>
 
    <footer>
 
      <!-- フッター -->
 
    </footer>

  </div>
</body>

【CSS】

body,
#wrapper {
  display: flex;
  flex-direction: column;
  min-height: 100vh;
}

footer {
  margin-top: auto;
}

以上！

position: fixed; を使う

CSSの指定を予めしっかりとしておくことにより、簡単にフッターに固定ができます。

↓やりたいことはこんな感じです（イメージ図）

フッター一番下

実際のHTMLとCSSはこんな感じです。
重要なのは高さの100％指定と、positionの指定、そしてpadding-bottomです。

【HTML】

</pre>
<div id="container">
<div id="header">ヘッダー</div>
<div id="contents">コンテンツ</div>
<div id="footer">フッター</div>
</div>
<pre>

【CSS】

body , html {
	height: 100%;
}

#container {
	width: 100%;
	position: relative;
	height: auto !important;
	height: 100%;
	min-height: 100%;
}

#contents {
	padding-bottom: 100px;
}

#footer {
	position: fixed;
	bottom: 0;
	width: 100%;
	height: 100px;
}

※#footerのposition:absolute;でも動作しますが、お好みのほうをご使用下さい。（用法としてはfixedのほうが正しいかもしれません。）

とまぁかなりざっくり説明したんですけれども、
実際にサイトを作った後に、また指定をし直すのって面倒じゃないですか。
なので、完成後に気づいてしまった・・・という場合は、次の方法がおすすめです。

jQueryで実装する

ほんとjQueryって便利すぎるって何度でも思えるんですけれども、jQueryを使用することにより、ほんとうに簡単にフッターを最下部に表示することができます。

まずはコチラをダウンロード。

footerをウィンドウ下部に固定する『footerFixed.js』

ダウンロード先のURLにも設置方法は記載してあるのですが、
一応説明いたしますと、

<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.7.2/jquery.min.js"></script>
<script type="text/javascript" src="./footerFixed.js"></script>

このような記述を<head>～</head>の間に書き足して、フッター要素を、CSSで必ず「#footer」と指定し、HTMLでは<div id=”footer”></div>とやっていただけば、それだけでOKです。