[解決済み】フッターをページの一番下に流す、twitter bootstrap

質問

フッターをcssで流すテクニックは大体知っています。

Twitter bootstrapはレスポンシブであるためか、この方法をTwitter bootstrapで使うには少し問題があります。Twitter bootstrapでは、上記のブログ記事で説明されている方法で、フッターをページの一番下に表示させることができません。

どうすればいいですか？

スニペットが見つかりました ここで は、bootstrapで非常によく機能します。

Htmlです。

<div id="wrap">
  <div id="main" class="container clear-top">
    <p>Your content here</p>
  </div>
</div>
<footer class="footer"></footer>

CSSです。

html, body {
  height: 100%;
}

#wrap {
  min-height: 100%;
}

#main {
  overflow:auto;
  padding-bottom:150px; /* this needs to be bigger than footer height*/
}

.footer {
  position: relative;
  margin-top: -150px; /* negative value of footer height */
  height: 150px;
  clear:both;
  padding-top:20px;
}