2

当滚动到网站末尾时，我正在尝试为内容后面的节目添加页脚，这很难解释，所以我做了这个 gif

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

我试图在网上搜索教程，但我发现的不是我想要的（我所看到的只是向上滑动和向下滑动页脚）。

如果您能指出我的教程或解释如何做，将会有很大帮助。

4

1 回答 1

6

以下应该做你想要的，只使用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页脚. 我不会有机会测试一下，但会在我可以的时候更新。

于 2012-10-26T23:43:47.643 回答