内容背后的页脚

Question

当我向网站的末尾滚动时,我试图在内容后面显示页面,这很难解释所以我做了这个gif

http://imageshack.us/f/687/newdw.gif/

我试图在网上搜索教程,我发现的并不是我正在寻找的东西(我所见过的只是向上滑动并向下滑动页脚).

如果您可以指导我阅读教程或解释如何操作,那将会有很大帮助.

Answer 1

以下应该只使用css做你想要的.

http://jsfiddle.net/zVLrb/

此解决方案依赖于具有position:fixed行为的元素的方式.此代码表示在较短的页面上 - 即不会导致滚动条显示的页面,页脚将保持固定在页面底部,而不是内容.

基本上,当用户滚动时,页脚总是附着在窗口/视口的底部,但是大多数时候你看不到它,因为页面的其余部分浮动在它上面 - 这是由于使用了页面内容比页脚更高的z-index.通过使用与页脚相同高度的底部边距,我们允许显示页脚的空间,但仅限于页面底部.:)

这应该适用于所有现代浏览器,但是你应该在IE7中进行测试以确保(因为我现在还没有这样做).

CSS

.rest {
    position: relative;
    z-index: 100;
    background: #fff;
    margin-bottom: 200px;
    overflow: hidden;
}

.footer {
    height: 200px;
    width: 100%;
    background: #000;
    position: fixed;
    bottom: 0;
    z-index: -1;
    color: white;
    text-align: center;
    font-size: 20pt;
}

.footer p {
    margin-top: 50px;
}

标记

<div class="rest">
  <p>
    Lorem ipsum dolor sit amet, consectetur adipiscing elit. Ut feugiat
    euismod urna, eget interdum eros elementum in. Morbi dictum molestie
    porta. Morbi eget consectetur nibh. Etiam sed arcu ac elit dignissim
    consequat.
  </p>
  <!-- obviously this content would need to go on for longer to 
       cause the page to scroll //-->
</p>
</div>
<div class="footer">
    <p>This is the footer</p>
</div>

更新

我不太记得了,但我认为,与旧的Internet Explorer负的z-index可能把页脚下面body层.. (这意味着它不会是可见的话),因此它可能是最好用z-index:2的.rest和z-index:1页脚.我不会有机会测试了一下,但是当我可以将更新.