Twitter BootstrapでCSS Sticky Footer

CSS

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

Twitter Bootstrap 2用です。

# html

<body>
<div id="wrap">
  <div class="navbar navbar-fixed-top">
    <div class="navbar-inner">
      <div class="container">
        <a class="brand" href="#">Sticky Footer</a>
        <div class="nav-collapse">
          <ul class="nav">
            <li><a href="#">メニュー1</a></li>
            <li><a href="#">メニュー2</a></li>
          </ul>
        </div><!--/.nav-collapse -->
      </div>
    </div>
  </div>

  <div class="container">
    <div class="page-header">
      <h1>Title</h1>
    </div>
    <p class="lead"></p>
  </div>

  <div id="push"></div>
</div>

<div id="footer">
  <div class="container">
    <p class="muted credit">Sticky Footer</p>
  </div>
</div>
</body>

# css

/*------------------------------------------
   Sticky footer styles
--------------------------------------------*/
html,
body {
  height: 100%;
}

#wrap {
  min-height: 100%;
  height: auto !important;
  height: 100%;
  margin: 0 auto -60px;
}

#push,
#footer {
  height: 60px;
}
#footer {
  background-color: #f5f5f5;
}

#wrap > .container {
  padding-top: 60px;
}

.container .credit {
  margin: 20px 0;
}

f:id:kzy52:20130705193246p:plain

・参考にしたサイト

http://aozora.github.io/bootplus/examples/sticky-footer-navbar.html