Question

我试图从这个网站复制页脚的效果：

http://www.terradatbroker.com

本质上它的作用就像顶部的图像，图像保持固定，而div或部分的视口滚动。我喜欢带有内容的div或footer块，以便在到达页脚时，首先显示页脚的下半部分，让内容div向下滑动，同时向下滚动。我希望这清楚地描述它。这是我到目前为止所得到的：

HTML片段：

<div class="row content-filler">
    Content 1
</div>

<footer>
    <div class="footer">
        <h1 class="">Footer</h1>
    </div>
</footer>

CSS片段：

  footer {
      background-color: #444;
      min-height: 350px;
      color: #fff;
      margin: 0px;
      padding: 0px;

      z-index: 1;
  }
  .footer {
      margin: 0px;
      padding: 0px;
      background-color: #444;
      position:fixed;
      top: 800px;
      z-index: 1;
  }

这里是一个完整源代码的小提琴手：

https://jsfiddle.net/DTcHh/39204/

我搜索了许多引导主题，但我找不到能够实现此效果的主题。我也看过css，但我怀疑它可能是用javascript完成的，这是微缩的，不可读的。任何人都可以阐明如何做到这一点？

Answer 1

检查此https://jsfiddle.net/DTcHh/39205/
页脚固定与bottom:0
最后一个div.row有一个margin-bottom，为页脚提供空间。
希望它有所帮助，欢呼。

使用bootstrap / jQuery修复视口中的页脚

1 个答案: