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 */
}

粘性页脚中的流体高度

1 个答案: