内容背后的页脚

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

http://sofzh.miximages.com/jquery//

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

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

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

http://jsfiddle.net/zVLrb/

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

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

这应该适用于所有现代浏览器,但是你应该在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; } 

标记

 

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.

更新

我不太记得,但我认为使用旧的Internet Explorer时,负的z-index可能会将页脚放在body层之下.. (意味着它根本不可见)所以最好使用z-index:2 for .rest和z-index:1页脚为z-index:1 。 我不会有机会测试一下,但会尽快更新。