粘性页脚中的流体高度答案

【问题标题】：fluid height in sticky footer粘性页脚中的流体高度
【发布时间】：2013-01-24 05:50:47
【问题描述】：

我正在为我的项目设置引导粘性页脚：http://twitter.github.com/bootstrap/examples/sticky-footer.html

是否可以设置内容的高度以填充剩余空间？让我解释。我想驻留图像，我需要根据可用高度调整它的大小。

【问题讨论】：

我不懂你。内容已填满剩余空间。如果要在内容中添加图像以根据内容的高度和宽度进行缩放，请使用img {max-width: 100%; max-height: 100%;}
但是还有标题。
@Eric 所以将标题放在内容中，为项目或其他内容创建另一个 div，并为该项目 div 添加图像或背景。

标签： css twitter-bootstrap height sticky-footer

【解决方案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 */
}

【讨论】：