読者です 読者をやめる 読者になる 読者になる

tkymtk's blog

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

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

HTML

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

感想

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

追記(2014/07/11)

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

広告

(パクト)PACT Men's Navy Bootstrap Stripe Crew Sock F13-MSK-NBS  NAVY BOOTSTRAP STRIPE FREE

(パクト)PACT Men's Navy Bootstrap Stripe Crew Sock F13-MSK-NBS NAVY BOOTSTRAP STRIPE FREE

実践Webデザイン jQuery+CSSフレームワークでサクサクつくる「動き」と「仕掛け」

実践Webデザイン jQuery+CSSフレームワークでサクサクつくる「動き」と「仕掛け」

フロントエンドエンジニア養成読本 [HTML、CSS、JavaScriptの基本から現場で役立つ技術まで満載! ] (Software Design plus)

フロントエンドエンジニア養成読本 [HTML、CSS、JavaScriptの基本から現場で役立つ技術まで満載! ] (Software Design plus)

間違いがあれば、ご指摘下さると幸いです。