css - スティッキー フッターの流動的な高さ

Question

私は自分のプロジェクトでブートストラップのスティッキー フッターをスタイリングしています: http://twitter.github.com/bootstrap/examples/sticky-footer.html

残りのスペースを埋めるためにコンテンツの高さを設定することはできますか? 説明させてください。イメージを保存したいのですが、使用可能な高さに応じてサイズを変更する必要があります。

Answer 1

コンテンツの最後とフッターの最初の間のスペースを埋めたい場合、あらゆる種類の課題が見られます。

画像の詳細によっては、次のように背景として含めることができます:
http://jsfiddle.net/panchroma/hBzjn/

おそらく異なるビューポイントで異なる画像を使用してメディアクエリを使用し、パディングを使用して結果を絞り込むこともできます。

幸運を！

HTML

 <div id="wrap">
    <div class="contentWrap">

  <!-- Begin page content -->
  <div class="container">
    <div class="page-header">
      <h1>Sticky footer</h1>
    </div>
    <p>page content</p>
  </div>

  <div id="push"></div>
    </div><!-- end contentWrap -->
</div> <!-- end wrap -->

<div id="footer">
  <div class="container">
      <h3>sticky footer </h3>
  </div>
</div>

CSS

#wrap{
background: url(http://is.gd/0QPvoC) left bottom; /* define image and position */
}

.contentWrap{
background-color:#fff;  /* quick fix so background image is hidden behind main content */
}