Bootstrap3 フッターをページの下部に固定する方法（スティッキーフッター）

2014/07/11: 最後に追記しました。

ことはじめ

Bootstrap3でfooterのCSSを設定したかったので、調べたら Sticky footer という方法があった。しかし、Stackoverflowや既存のサイトを見ると、どうもおかしい。そこで、Bootstrap3の公式サイトからちゃんとコードを取ってきた。

CSS

/* フッターを下部へ固定
-------------------------------------------------- */

html,
body {
  height: 100%;
  /* html と body 要素はパディングやマージンを持てません。*/
}

/* フッターを下部へ押しやるための、コンテンツのラッパー */
#wrap {
  min-height: 100%;
  height: auto;
  /* フッターの高さ分だけ、ネガティブインデントを指定 */
  margin: 0 auto -60px;
  /* フッターの高さ分だけ、パディングを指定 */
  padding: 0 0 60px;
}

/* ここでフッターの高さを指定 */
#footer {
  height: 60px;
  background-color: #f5f5f5;
}

HTML

 <body>

    <!-- ページのコンテンツすべてをwrapする（フッター以外） -->
    <div id="wrap">

      <!-- ここからページのコンテンツ -->
      <div class="container">

        <!-- コンテンツ -->

      </div>
    </div>

    <!-- フッターは#wrapの外に -->
    <div id="footer">

      <div class="container">
           <!-- コンテンツ -->
      </div>

    </div>
  </body>

リンク

CSS

http://getbootstrap.com/examples/sticky-footer/sticky-footer.css

HTML

Sticky Footer Template for Bootstrap
右クリック→ソースの表示をして下さい。 CSSへのリンクはこの部分です。

<!-- Custom styles for this template -->
<link href="sticky-footer.css" rel="stylesheet">

感想

これで、ステッキー（素敵）なスティッキーフッターができた。（言いたかっただけです、すみません。）

追記(2014/07/11)

http://stackoverflow.com/a/20611729/2930161

とかみると、もうwrapはいらないとかコメントに書いてあるので、最新のバージョンでは上に書いたやつとは変わっているかも。

tkymtk's blog

Ruby on Rails及びその周辺について調べたこと。Do whatever you want to do at your own pace.

Bootstrap3 フッターをページの下部に固定する方法（スティッキーフッター）

ことはじめ

CSS

HTML

リンク

感想

追記(2014/07/11)

広告