Twitter Bootstrapでフッターをページの下にくっつける

質問

あまり内容のないウェブページがあり、フッターがページの真ん中にありますが、一番下にしたいのです。

私はすべてのページを"holder"に入れました。

#holder {
  min-height: 100%;
  position:relative;
}

そして、フッターには以下のCSSを使用しました。

ul.footer {
  margin-top: 10px;
  text-align: center;
}

ul.footer li {
  color: #333;
  display: inline-block;
}

#footer {
  bottom: -50px;
  height: 50px;
  left: 0;
  position: absolute;
  right: 0;
}

フッターのhtml

<div class="container">
  <div class="row">
    <div class="span12">
      <div id="footer">
        <ul class="footer">
          <li>Website built by <a href="#">Fishplate</a></li>&nbsp;&nbsp;
          <li>Email:[email protected]</li>
        </ul>
      </div>
    </div>
  </div>
</div>

フッターは流動的にしたいのですが。

どのように解決するのですか？

コメントで議論されているように、あなたはこの解決策にあなたのコードをベースにしています。 https://stackoverflow.com/a/8825714/681807

この解決策の重要な部分のひとつは、このページに height: 100% に html, body ということで #footer 要素には、作業するための基本的な高さがあります。

html,body{
    height: 100%
}

を使用する際に問題に遭遇することもあるでしょう。 bottom: -50px を使用すると、コンテンツがあまりないときに、コンテンツを折り返しの下に押し込んでしまうからです。その場合は margin-bottom: 50px の前にある最後の要素に #footer .