css - 粘性页脚中的流体高度

Question

我在我的元素上设置 Bootstrap 粘性页脚: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 */
}